import Button from 'components/common/Buttons';
import Label from 'components/Label';
import 'components/Sections/Subscribe/style.scss';
import useMediaQuery from 'hooks/useMediaQuery';
import { useState } from 'react';
import { Link } from 'react-router-dom';
import subscribeBg from 'assets/backgrounds/get-started.svg';
import subscribeBgMob from 'assets/backgrounds/getStartedBgMob.svg';

const Sitemap = () => {
    const [updateSitemapResult, setUpdateSitemapResult] = useState('');
    const [isSent, setIsUpdate] = useState(false);
    const [password, setPassword] = useState('');
    const [isPasswordValid, setIsPasswordValid] = useState(true);
    const [errorMessage, setErrorMessage] = useState('');
    const isTablet = useMediaQuery('max-width: 768px');
    const heightValue = `calc(100vh - 112px)`;
    const validatePassword = () => {
        return password.length >= 3;
    };

    const updateSitemap = async () => {
        try {
            const isPasswordCorrect = validatePassword();
            if (!isPasswordCorrect) {
                setIsPasswordValid(false);
                setErrorMessage('Password must be at least 3 characters long');
                return;
            }
            const response = await fetch(`/update-sitemap.php?update=true&password=${password}`);
            const data = await response.text();
            if (response.ok) {
                setUpdateSitemapResult(data);
                setIsUpdate(true);
            } else {
                if (data.includes('Incorrect password')) {
                    setIsPasswordValid(false);
                    setErrorMessage('Incorrect password');
                } else {
                    setErrorMessage(data);
                }
            }
        } catch (error) {
            console.error('Error updating sitemap:', error);
        }
    };

    const handleInputChange = (e) => {
        const inputValue = e.target.value;
        setPassword(inputValue);
        setIsPasswordValid(true);
        setErrorMessage('');
    };

    const handleKeyPress = (e) => {
        if (e.key === 'Enter') {
            updateSitemap();
        }
    };

    return (
        <section className={`container newsletter-subscriber  ${isSent ? "newsletter-subscriber-sent" : ""}`} style={{ height: heightValue, marginBottom: '-112px' }}>
            {isSent ?
                <>
                    <h2 className="h2">Site map has been updated</h2>
                    <div className="body2 newsletter-subscriber__desc">Check your sitemap on <Link to={'/sitemap.xml'} target='_blank'>Site Map</Link></div>
                </>
                :
                <>
                    <Label text={"Sitemap"} type="outline" />
                    <h2 className="h2">Update Sitemap</h2>
                    <div className="input-container">
                        <div className='newsletter-subscriber__input'>
                            <input
                                className={`input ${isPasswordValid ? '' : 'input--error'}`}
                                type="password"
                                name="password"
                                placeholder={"Password"}
                                value={password}
                                onChange={handleInputChange}
                                onKeyPress={handleKeyPress} />
                            {!isPasswordValid && <div className='body3 error'>{errorMessage}</div>}
                        </div>
                        <Button type="white" text={"Update Sitemap"} size="L" hasArrow={false} onClick={updateSitemap} />
                    </div>
                </>
            }
            <img className='newsletter-subscriber__bg' style={{ transform: 'scale(1.2)' }} src={isTablet ? subscribeBgMob : subscribeBg} alt="" />
        </section>
    );
};

export default Sitemap;

• [F] index.jsx
  Delete