import { useEffect, useState } from 'react';
import { useDispatch } from 'react-redux';

import { setPageTitle } from '../../store/themeConfigSlice';

import ProtectedRoute from '@/components/ProtectedRoute';
import Select from 'react-select';
import ProductScript from '@/components/Products/Personal/product-script';
import ProductABC from '@/components/Products/Personal/product-abc';
import Link from 'next/link';

const PersonalSettings = () => {
    const dispatch = useDispatch();
    const [isMounted, setIsMounted] = useState(false);

    useEffect(() => {
        setIsMounted(true);
        dispatch(setPageTitle('Personal Setting'));
    }, []);

    const listProductPersonal = [
        { value: 'script', label: 'Script' },
        { value: 'abc', label: 'The ABC' },
    ];

    const [selectedPersonalProduct, setSelectedPersonalProduct] = useState<any>();

    const handleProductPersonalChange = (e: any) => {
        setSelectedPersonalProduct(e);
    };

    return (
        <>
            {isMounted && (
                    <>
                        <div className="custom-select mb-5 w-1/2 lg:w-1/4">
                            <Select
                                options={listProductPersonal}
                                id="product_type"
                                placeholder="Select Product Personal"
                                className="dark:flex-1"
                                name="product_type"
                                value={selectedPersonalProduct}
                                onChange={handleProductPersonalChange}
                            />
                        </div>
                        {selectedPersonalProduct && (
                            <>
                                {selectedPersonalProduct.value === 'script' && <ProductScript />}
                                {selectedPersonalProduct.value === 'abc' && <ProductABC />}
                            </>
                        )}
                    </>
                )}
        </>
    );
};

export default PersonalSettings;