Edit.jsx

'use client';
import React, { useState, useEffect, Suspense } from 'react';

import {
  Buttons,
  Tabs,
  TextInput,
  MessageBox,
  Toggle,
  Modal,
} from 'vestarplus-design-system';
import TempOne from './TempOne';
import Image from 'next/image';
import { useSearchParams } from 'next/navigation';
import { auth, db, storage } from '../firebase';
import { doc, getDoc, updateDoc, setDoc } from 'firebase/firestore';
import { ref, uploadBytes, getDownloadURL } from 'firebase/storage';
import CircularProgress from '@mui/material/CircularProgress';
import TempTwo from './TempTwo';

export default function Editor() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <EditorContent />
    </Suspense>
  );
}
function EditorContent() {
  const searchParams = useSearchParams();
  const [isModalOpen, setModalOpen] = useState(false);

  const openModal = () => {
    setModalOpen(true);
  };

  const closeModal = () => {
    setModalOpen(false);
  };
  const [editedContent, setEditedContent] = useState({
    logoText: '',
    buttonText1: '',
    buttonText2: '',
    heading1: '',
    bodyText: '',
    downText: '',
    heroImage: '', // Add image state here
    plentyHeroImage: [], // Add image state here
    carouselImages: [], // Add image array state here
    galleryImages: [], // Add image array state here
  });
  const [template, setTemplate] = useState(''); // Default template is TempOne

  useEffect(() => {
    const template = searchParams.get('template');
    if (template) {
      setTemplate(template);
    }
  }, [searchParams]);
  // const page = searchParams.get('template');
  // console.log('page:', template);
  const [editingField, setEditingField] = useState(null);
  const [editingHeroImage, setEditingHeroImage] = useState(false);
  const [toggleState, setToggleState] = useState(false);
  const [selectedTheme, setSelectedTheme] = useState({
    buttonColor: '',
    backgroundColor: '',
    secondButtonColor: '',
    secondButtonText: '',
    blackBackgroundColor: '',
  });
  const [isLoading, setIsLoading] = useState(false);
  const handleThemeChange = (theme) => {
    setSelectedTheme(theme);
  };

  // Handler function to update edited content
  const handleContentChange = (field, value) => {
    setEditedContent((prevContent) => ({
      ...prevContent,
      [field]: value,
    }));
  };
  const handleImageChange = (field, value) => {
    setEditedContent((prevContent) => ({
      ...prevContent,
      [field]: value,
    }));
  };

  const tabs = [
    {
      label: 'Text',
      content: (
        <div className="mt-5">
          <TextEditor
            editedContent={editedContent}
            onContentChange={handleContentChange}
            setEditingField={setEditingField}
            editingField={editingField}
          />
        </div>
      ),
    },
    {
      label: 'Upload',
      content: (
        <div className="mt-5">
          <UploadImages
            onImageChange={handleImageChange}
            setEditingHeroImage={setEditingHeroImage}
            template={template}
          />
        </div>
      ),
    },
    {
      label: 'Theme',
      content: (
        <div className="mt-5">
          <ThemeChanger onThemeChange={handleThemeChange} />
        </div>
      ),
    },
    {
      label: 'Settings',
      content: (
        <div className="mt-5">
          <Settings setToggleState={setToggleState} toggleState={toggleState} />
        </div>
      ),
    },
  ];
  // console.log('editedContent:', editedContent);

  const handleSaveChanges = async () => {
    setIsLoading(true);
    try {
      // Ensure the user is logged in
      if (!auth.currentUser) {
        console.error('User not logged in');
        return;
      }

      const userId = auth.currentUser.uid;

      // Reference to the user's document
      const userRef = doc(db, 'weddingers', userId);

      // Get the existing data
      const userDoc = await getDoc(userRef);

      // Extract the existing website styles array or create a new one
      const websiteStyles = userDoc.exists()
        ? userDoc.data().websiteStyles || []
        : [];

      // Check if an object with the same templateType already exists
      const existingObjectIndex = websiteStyles.findIndex(
        (style) => style.templateType === template
      );

      // If it exists, update the existing object
      if (existingObjectIndex !== -1) {
        websiteStyles[existingObjectIndex] = {
          templateType: template,
          editedContent: {
            ...editedContent,
            heroImage: editedContent.heroImage,
            plentyHeroImage: editedContent.plentyHeroImage || [],
            carouselImages: editedContent.carouselImages || [],
            galleryImages: editedContent.galleryImages || [],
          },
          selectedTheme,
          // Add other relevant data from your components
        };
      } else {
        // If it doesn't exist, add a new object
        websiteStyles.push({
          templateType: template,
          editedContent: {
            ...editedContent,
            heroImage: editedContent.heroImage,
            plentyHeroImage: editedContent.plentyHeroImage || [],
            carouselImages: editedContent.carouselImages || [],
            galleryImages: editedContent.galleryImages || [],
          },
          selectedTheme,
          // Add other relevant data from your components
        });
      }

      // Check if the document already exists
      if (userDoc.exists()) {
        // Update the existing document
        await updateDoc(userRef, { websiteStyles });
      } else {
        // Create a new document with the specified data
        await setDoc(userRef, { websiteStyles });
      }

      console.log('Changes saved successfully!');
    } catch (error) {
      console.error('Error saving changes:', error);
    } finally {
      setIsLoading(false);
    }
    openModal();
  };

  return (
    <div className="nigholgder">
      <div className="container-fluid rocky_under">
        <div className="marggg">
          <div className="flexxer">
            <div className="welcome">
              <span>Website Builder</span>
            </div>
            <div>
              <div className="d-flex">
                <div className="mx-3">
                  <Buttons type="transparent" size="medium">
                    <div className="d-flex">
                      {' '}
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        fill="#0E5912"
                        viewBox="0 0 24 24"
                        stroke-width="1.5"
                        stroke="#0E5912"
                        style={{ height: '20px', width: '20px' }}
                      >
                        <path
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          d="M7.217 10.907a2.25 2.25 0 1 0 0 2.186m0-2.186c.18.324.283.696.283 1.093s-.103.77-.283 1.093m0-2.186 9.566-5.314m-9.566 7.5 9.566 5.314m0 0a2.25 2.25 0 1 0 3.935 2.186 2.25 2.25 0 0 0-3.935-2.186Zm0-12.814a2.25 2.25 0 1 0 3.933-2.185 2.25 2.25 0 0 0-3.933 2.185Z"
                          fill="#0E5912"
                        />
                      </svg>
                      <span className=" share">Share</span>
                    </div>
                  </Buttons>
                </div>

                <Buttons type="success" size="medium">
                  <span>
                    <svg
                      width="14"
                      height="14"
                      viewBox="0 0 14 14"
                      fill="none"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        fill-rule="evenodd"
                        clip-rule="evenodd"
                        d="M2.625 3.29746C2.625 2.46555 3.51692 1.93818 4.24585 2.3391L10.9779 6.0417C11.7334 6.45724 11.7334 7.54288 10.9779 7.95842L4.24585 11.661C3.51691 12.0619 2.625 11.5346 2.625 10.7027V3.29746Z"
                        fill="white"
                      />
                    </svg>
                  </span>
                  <span className="preww">Preview Site</span>
                </Buttons>
              </div>
            </div>
          </div>
        </div>

        <div className="row">
          <div className="col-12 col-lg-8 wahoues">
            {template === 'TempOne' && (
              <TempOne
                editedContent={editedContent}
                selectedTheme={selectedTheme}
                editingField={editingField}
                editingHeroImage={editingHeroImage}
                toggleState={toggleState}
              />
            )}
            {template === 'TempTwo' && (
              <TempTwo
                editedContent={editedContent}
                selectedTheme={selectedTheme}
                editingField={editingField}
                editingHeroImage={editingHeroImage}
                toggleState={toggleState}
              />
            )}
          </div>
          <div className="col-12 col-lg-4 border wahoues">
            <div className=" ">
              <div className="jelosimi">
                <span>Website Builder</span>
              </div>
              <div className="mt-4">
                <div>
                  <Tabs tabs={tabs} />
                </div>
              </div>
            </div>
            <div className="mt-2 mb-3">
              <Buttons
                type="custom"
                size="medium"
                customStyles={{
                  backgroundColor: '#d38c02',
                  borderColor: '#d38c02',
                  hoverBackgroundColor: '#d38c02',
                  pressBackgroundColor: '#d38c02',
                }}
                disabled={
                  !Object.values(editedContent).some(
                    (value) => typeof value === 'string' && value.trim() !== ''
                  )
                }
                onClick={handleSaveChanges}
              >
                {isLoading ? (
                  <span>
                    <CircularProgress
                      style={{
                        height: '20px',
                        width: '20px',
                        color: 'white',
                      }}
                    />
                  </span>
                ) : (
                  <span className="preww">Submit</span>
                )}
              </Buttons>
            </div>
          </div>
        </div>
      </div>
      <Modal isOpen={isModalOpen} onClose={closeModal}>
        <div>
          <div>
            <div className="spinnoff">
              <span>
                <svg
                  width="66"
                  height="66"
                  viewBox="0 0 66 66"
                  fill="none"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <rect width="66" height="66" rx="33" fill="white" />
                  <path
                    fill-rule="evenodd"
                    clip-rule="evenodd"
                    d="M6.1875 33C6.1875 18.1919 18.1919 6.1875 33 6.1875C47.8081 6.1875 59.8125 18.1919 59.8125 33C59.8125 47.8081 47.8081 59.8125 33 59.8125C18.1919 59.8125 6.1875 47.8081 6.1875 33ZM42.9283 28.0113C43.5904 27.0844 43.3757 25.7963 42.4488 25.1342C41.5219 24.4721 40.2338 24.6868 39.5717 25.6137L30.6743 38.07L26.2084 33.6041C25.403 32.7986 24.097 32.7986 23.2916 33.6041C22.4861 34.4095 22.4861 35.7155 23.2916 36.5209L29.4791 42.7084C29.9078 43.1371 30.5034 43.3555 31.1076 43.3055C31.7118 43.2555 32.2634 42.9422 32.6158 42.4488L42.9283 28.0113Z"
                    fill="#0E6611"
                  />
                  <path
                    fill-rule="evenodd"
                    clip-rule="evenodd"
                    d="M6.1875 33C6.1875 18.1919 18.1919 6.1875 33 6.1875C47.8081 6.1875 59.8125 18.1919 59.8125 33C59.8125 47.8081 47.8081 59.8125 33 59.8125C18.1919 59.8125 6.1875 47.8081 6.1875 33ZM42.9283 28.0113C43.5904 27.0844 43.3757 25.7963 42.4488 25.1342C41.5219 24.4721 40.2338 24.6868 39.5717 25.6137L30.6743 38.07L26.2084 33.6041C25.403 32.7986 24.097 32.7986 23.2916 33.6041C22.4861 34.4095 22.4861 35.7155 23.2916 36.5209L29.4791 42.7084C29.9078 43.1371 30.5034 43.3555 31.1076 43.3055C31.7118 43.2555 32.2634 42.9422 32.6158 42.4488L42.9283 28.0113Z"
                    fill="#0E6611"
                  />
                </svg>
              </span>
            </div>
            <div className="bleaches">
              <span>Your website has been saved successfully</span>
            </div>
            <div className="prevvz">
              <span>You can now preview your website</span>
            </div>
            <div className="mt-3 mb-4">
              <Buttons
                type="custom"
                size="medium"
                customStyles={{
                  backgroundColor: '#d38c02',
                  borderColor: '#d38c02',
                  hoverBackgroundColor: '#d38c02',
                  pressBackgroundColor: '#d38c02',
                }}
                onClick={closeModal}
              >
                <span style={{ color: 'white' }}>Done</span>
              </Buttons>
            </div>
          </div>
        </div>
      </Modal>
    </div>
  );
}

export const TextEditor = ({
  editedContent,
  onContentChange,
  setEditingField,
  editingField,
}) => {
  const [text, setText] = useState('');

  const handleTextChange = (event, field) => {
    const newText = event?.target?.value;
    const newBodyText = event?.target?.value;
    onContentChange(field, newBodyText);
    setEditingField(field);
  };
  const handleTextChange2 = (event, field) => {
    const newText = event?.target?.value;
    onContentChange(field, newText); // Use field parameter instead of 'bodyText'
    setEditingField(field);
    // Check if the new text exceeds the character limit (100)
    if (newText?.length <= 100) {
      setText(newText);
    }
  };
  const isLimitExceeded = text?.length >= 100;
  return (
    <div>
      <div className="mb-4">
        <span className="lavell">Logo Text</span>
        <div className="mt-2">
          <TextInput
            placeholder="Logo Text"
            onChange={(event) => {
              const newLogoText = event?.target?.value;
              onContentChange('logoText', newLogoText);
              handleTextChange(event, 'logoText');
            }}
            editing={editingField === 'logoText'}
          />
        </div>
      </div>
      <div className="mb-4">
        <span className="lavell">Button Text 1</span>
        <div className="mt-2">
          <TextInput
            placeholder="Button Text 1"
            onChange={(event) => {
              const newButton1 = event?.target?.value;
              onContentChange('buttonText1', newButton1);
              handleTextChange(event, 'buttonText1');
            }}
            editing={editingField === 'buttonText1'}
          />
        </div>
      </div>
      <div className="mb-4">
        <span className="lavell">Button Text 2</span>
        <div className="mt-2">
          <TextInput
            placeholder="Button Text 2"
            onChange={(event) => {
              const newButton2 = event?.target?.value;
              onContentChange('buttonText2', newButton2);
              handleTextChange(event, 'buttonText2');
            }}
            editing={editingField === 'buttonText2'}
          />
        </div>
      </div>

      <div className="mb-4">
        <span className="lavell">Heading 1</span>
        <div className="mt-2">
          <TextInput
            placeholder="Body Text"
            onChange={(event) => {
              const heading1 = event?.target?.value;
              onContentChange('heading1', heading1);
              handleTextChange(event, 'heading1');
            }}
          />
        </div>
      </div>
      <div className="mb-4">
        <div className="d-flex justify-content-between">
          <div>
            {' '}
            <span className="lavell"> Body Text</span>
          </div>
          <div>
            {' '}
            <span className={isLimitExceeded ? 'limitexceeded' : 'limit'}>
              {text.length}/100
            </span>
          </div>
        </div>

        <div className="mt-2">
          <MessageBox
            placeholder="Heading 1"
            value={text}
            onChange={(event) => handleTextChange2(event, 'bodyText')} // Pass 'bodyText' as field
            editing={editingField === 'bodyText'}
          />
        </div>
      </div>
      <div className="mb-4">
        <span className="lavell">footer</span>
        <div className="mt-2">
          <TextInput
            placeholder="footer"
            onChange={(event) => {
              const footer1 = event?.target?.value;
              onContentChange('downText', footer1);
              handleTextChange(event, 'downText');
            }}
          />
        </div>
      </div>
    </div>
  );
};

export const UploadImages = ({
  onImageChange,
  setEditingHeroImage,
  template,
}) => {
  const [heroImage, setHeroImage] = useState('');
  const [loading, setLoading] = useState(false);
  const [loading2, setLoading2] = useState(false);

  const handleSingleImageUpload = async (field, file) => {
    setLoading(true);
    const storageRef = ref(
      storage,
      `all-website/${auth?.currentUser?.uid}/website-images/${file.name}`
    );

    try {
      // Upload image to Firebase Storage
      await uploadBytes(storageRef, file);

      // Get download URL
      const downloadURL = await getDownloadURL(storageRef);

      // Update state with the download URL
      setHeroImage(downloadURL);
      onImageChange(field, downloadURL);
      setEditingHeroImage(true);
    } catch (error) {
      console.error('Error uploading image:', error);
    } finally {
      setLoading(false); // Set loading to false when upload completes (either success or error)
    }
  };

  const handleMultipleImagesUpload = async (field, value) => {
    setLoading2(true);
    const files = value;
    if (files) {
      const images = [];

      for (const file of files) {
        const storageRef = ref(
          storage,
          `all-website/${auth?.currentUser?.uid}/website-images/${file.name}`
        );

        // Upload image to Firebase Storage
        try {
          await uploadBytes(storageRef, file);

          // Get download URL
          const downloadURL = await getDownloadURL(storageRef);

          // Add the download URL to the array
          images.push(downloadURL);

          // If all images are loaded, update the state and call onImageChange
          if (images.length === files.length) {
            setHeroImage(images);
            onImageChange(field, images);
          }
        } catch (error) {
          console.error('Error uploading image:', error);
        } finally {
          setLoading2(false); // Set loading to false when upload completes (either success or error)
        }
      }
    }
  };

  return (
    <div>
      {template !== 'TempTwo' && (
        <>
          <div className="mb-4">
            {/* for uploading hero image */}
            <span className="lavell">Hero Image</span>
            <div className="mt-3">
              <div className="dashed">
                <div className="mt-3 ">
                  <div className="d-flex justify-content-center"></div>
                  <div className="uppimg">
                    <span>Upload Image</span>
                  </div>
                  <div className="sizetalk">
                    <span>Upload just 1 image.</span>
                  </div>
                  {/* <Image src={heroImage} width={500} height={500} priority /> */}
                  <div className="d-flex justify-content-center mt-3">
                    <label className="Uploadbutt" htmlFor="heroimagee">
                      <input
                        type="file"
                        id="heroimagee"
                        accept="image/*"
                        onChange={(e) =>
                          handleSingleImageUpload(
                            'heroImage',
                            e.target.files[0]
                          )
                        }
                        style={{ display: 'none' }}
                      />
                      {loading ? (
                        <span>
                          <CircularProgress
                            style={{
                              height: '20px',
                              width: '20px',
                              color: 'white',
                            }}
                          />
                        </span>
                      ) : (
                        <span>Upload Hero Image</span>
                      )}
                    </label>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </>
      )}

      <>
        {template === 'TempTwo' && (
          <div className="mb-4">
            {/* multiple image upload for TempTwo templates */}
            <span className="lavell">Hero image for Template 2</span>
            <div className="mt-3">
              <div className="dashed">
                <div className="mt-3 ">
                  <div className="uppimg">
                    <span>Upload Image</span>
                  </div>
                  <div className="sizetalk">
                    <span>Upload a maximum of 5 images</span>
                  </div>
                  <div className="d-flex justify-content-center mt-3">
                    <label className="Uploadbutt" htmlFor="plentyHeroImage">
                      <input
                        type="file"
                        id="plentyHeroImage"
                        accept="image/*"
                        multiple
                        onChange={(e) =>
                          handleMultipleImagesUpload(
                            'plentyHeroImage',
                            e.target.files
                          )
                        }
                        style={{ display: 'none' }}
                      />

                      {loading2 ? (
                        <span>
                          <CircularProgress
                            style={{
                              height: '20px',
                              width: '20px',
                              color: 'white',
                            }}
                          />
                        </span>
                      ) : (
                        <span>Upload Image</span>
                      )}
                    </label>
                  </div>
                </div>
              </div>
            </div>
          </div>
        )}
      </>

      <div className="mb-4">
        {/* for uploading carousel image max 8 images */}
        <span className="lavell">Carousel Images</span>
        <div className="mt-3">
          <div className="dashed">
            <div className="mt-3 ">
              <div className="uppimg">
                <span>Upload Image</span>
              </div>
              <div className="sizetalk">
                <span>Upload a maximum of 5 images</span>
              </div>
              <div className="d-flex justify-content-center mt-3">
                <label className="Uploadbutt" htmlFor="carouselimage">
                  <input
                    type="file"
                    id="carouselimage"
                    accept="image/*"
                    multiple
                    onChange={(e) =>
                      handleMultipleImagesUpload(
                        'carouselImages',
                        e.target.files
                      )
                    }
                    style={{ display: 'none' }}
                  />
                  {loading2 ? (
                    <span>
                      <CircularProgress
                        style={{
                          height: '20px',
                          width: '20px',
                          color: 'white',
                        }}
                      />
                    </span>
                  ) : (
                    <span>Upload Hero Image</span>
                  )}
                </label>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div className="mb-4">
        {/* for uploading gallery image max 20 */}
        <span className="lavell">Gallery Images</span>
        <div className="mt-3">
          <div className="dashed">
            <div className="mt-3 ">
              <div className="uppimg">
                <span>Upload Image</span>
              </div>
              <div className="sizetalk">
                <span>Upload a maximum of 15 images</span>
              </div>
              <div className="d-flex justify-content-center mt-3">
                <label className="Uploadbutt" htmlFor="galleryimage">
                  <input
                    type="file"
                    id="galleryimage"
                    accept="image/*"
                    multiple
                    onChange={(e) =>
                      handleMultipleImagesUpload(
                        'galleryImages',
                        e.target.files
                      )
                    }
                    style={{ display: 'none' }}
                  />
                  {loading ? (
                    <span>
                      <CircularProgress
                        style={{
                          height: '20px',
                          width: '20px',
                          color: 'white',
                        }}
                      />
                    </span>
                  ) : (
                    <span>Upload Image</span>
                  )}
                </label>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};
export const ThemeChanger = ({ onThemeChange }) => {
  const [selectedTheme, setSelectedTheme] = useState(null);

  const handleThemeChange = (theme) => {
    setSelectedTheme(theme);
    onThemeChange(theme);
  };
  const themes = [
    {
      name: 'Gold',
      secondName: 'Emerald Green',
      thirdName: 'Green Ivy',
      buttonColor: '#E0921E',
      backgroundColor: '#FFF7EE',
      secondButtonColor: '#0E6611',
    },
    {
      name: 'Turquoise',
      secondName: 'Light Blue',
      thirdName: 'Blue Sea',
      buttonColor: '#003D58',
      backgroundColor: '#E7F5FF',
      secondButtonColor: '#35667B',
    },
    {
      name: 'Purple',
      secondName: 'Lilac',
      thirdName: 'Green Ivy',
      buttonColor: '#67259B',
      backgroundColor: '#FCF9FF',
      secondButtonColor: '#fff',
      secondButtonText: '#000000',
    },
    {
      name: 'Dark Turquoise',
      secondName: 'Tan Beige',
      thirdName: 'Lilac Theme',
      buttonColor: '#06303E',
      backgroundColor: '#E4D0B5',
      secondButtonColor: '#237C82',
    },
    {
      name: 'Royal Blue',
      secondName: 'Blue',
      thirdName: 'Royal Theme',
      buttonColor: '#1B3069',
      backgroundColor: '#E7F5FF',
      secondButtonColor: '#1F51A0',
    },
    {
      name: 'Dark Blue',
      secondName: 'Grey',
      thirdName: 'Dark Blue Theme',
      buttonColor: '#011E41',
      backgroundColor: '#F2F4F5',
      secondButtonColor: '#AD9885',
    },
    {
      name: 'Gold',
      secondName: 'Black',
      thirdName: 'Lilac Theme',
      buttonColor: '#D38C02',
      backgroundColor: '#000000',
      secondButtonColor: '#fff',
      secondButtonText: '#000000',
      blackBackgroundColor: '#fff',
    },
    {
      name: 'Orange',
      secondName: 'Dark Blue',
      thirdName: 'Lilac Theme',
      buttonColor: '#F06937',
      backgroundColor: '#FDF0EB',
      secondButtonColor: '#011E41',
    },
    {
      name: 'Red',
      secondName: 'Burnt Orange',
      thirdName: 'Lilac Theme',
      buttonColor: '#D53839',
      backgroundColor: '#FEF9F9',
      secondButtonColor: '#DE6136',
    },
    {
      name: 'Burnt Orange',
      secondName: 'Brown',
      thirdName: 'Lilac Theme',
      buttonColor: '#993901',
      backgroundColor: '#E3D8D5',
      secondButtonColor: '#AF6626',
    },
    {
      name: 'Burgundy',
      secondName: 'Peach',
      thirdName: 'Lilac Theme',
      buttonColor: '#712233',
      backgroundColor: '#FCF3F1',
      secondButtonColor: '#DE8873',
    },
    {
      name: 'Plum',
      secondName: 'Peach',
      thirdName: 'Lilac Theme',
      buttonColor: '#5E223E',
      backgroundColor: '#FFF0EE',
      secondButtonColor: '#F9A38A',
    },
  ];

  return (
    <div>
      {themes.map((theme, index) => (
        <div key={index} className="mb-4">
          <div className="mt-3">
            <div className={selectedTheme === theme ? 'selectedTheme2' : ''}>
              <div
                className="themeround"
                onClick={() => handleThemeChange(theme)}
                style={{
                  border:
                    JSON.stringify(selectedTheme) === JSON.stringify(theme)
                      ? '1.7px solid #d38c02'
                      : '1px solid #eeeeee',
                  transition: 'border 0.3s ease',
                }}
              >
                <div
                  className="firsthalf"
                  style={{ background: theme.buttonColor }}
                >
                  <div className="dmseriff">
                    <span>{theme.name}</span>
                  </div>
                  <div className="Arial">
                    <span>{theme.secondName}</span>
                  </div>
                </div>
                <div className="secondhalf">
                  <div className="giv">{theme.thirdName}</div>
                  <div className="basccic">
                    <div
                      className="whitex"
                      style={{ border: '1px solid #000000' }}
                    ></div>
                    <div
                      // for button background color and outline and header texts
                      className="whitex "
                      style={{ background: theme.buttonColor }}
                    ></div>
                    <div
                      // for the entire background of the template
                      className="whitex"
                      style={{
                        background: theme.backgroundColor,
                        border: '1px solid #000000',
                      }}
                    ></div>
                    <div
                      className="whitex"
                      style={{
                        background: theme.secondButtonColor || '#ffffff',
                      }}
                    ></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      ))}
    </div>
  );
};
export const Settings = ({ setToggleState, toggleState }) => {
  const handleToggle = () => {
    setToggleState(!toggleState);
  };
  return (
    <div>
      <div>
        <div className="hustler">
          <span>Setting</span>
        </div>
        <div className="mt-5">
          <div className="borders">
            <div className="custom">
              <span>Custom Domain</span>
            </div>
            <div className="ohaye">
              <span>
                Buy a custom domain eg. jadelovesjames.com.ng for just NGN
                50,000
              </span>
            </div>
            <div className="mt-4">
              <span className="lavell">Domain Name</span>
              <div className="mt-2">
                <TextInput placeholder="jadelovesjames.com.ng" />
              </div>
              <div>
                <div className="mt-3 d-flex justify-content-end">
                  <Buttons
                    type="custom"
                    size="medium"
                    className="searchhh"
                    customStyles={{
                      backgroundColor: '#D38C02',
                      borderColor: '#db9e25',
                      hoverBackgroundColor: '#f1a306',
                      pressBackgroundColor: '#c18100',
                    }}
                  >
                    <span style={{ color: 'white' }}>Search</span>
                  </Buttons>
                </div>
              </div>
            </div>
          </div>
          <div className="mt-5 mb-5">
            <div className="hustler">
              <span>Setting</span>
            </div>
            <div className="mt-4">
              <div className="d-flex justify-content-between align-items-center">
                <div>
                  <div className="stop">Stop RSVPing</div>
                  <div className="ali">
                    Allow all this admin to update their Profile
                  </div>
                </div>
                <div>
                  <Toggle
                    size={32}
                    checked={toggleState}
                    onToggle={handleToggle}
                  />
                </div>
              </div>
              <div className="d-flex justify-content-between align-items-center mt-4">
                <div>
                  <div className="stop">Deactivate Site</div>
                  <div className="ali">Allow all admins access</div>
                </div>
                <div>
                  <Buttons
                    type="custom"
                    size="small"
                    className="searchhh"
                    customStyles={{
                      backgroundColor: '#D34D02',
                      borderColor: '#c54901',
                      hoverBackgroundColor: '#e75a09',
                      pressBackgroundColor: '#bb4501',
                    }}
                  >
                    <span style={{ color: 'white' }}>
                      Deactivate My Website
                    </span>
                  </Buttons>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};