import Button from '@/components/Button';
import { Add, AlignBottom, AlignHorizontally, AlignLeft, AlignRight, AlignTop, AlignVertically } from 'iconsax-react';
import { FC, useState } from 'react'
import { useTranslation } from 'react-i18next'
import ReactQuill from 'react-quill-new';
import { usePersonalityStore } from '../store/Store';
import ColorPicker from '@/components/ColorPicker';
import { HorizontalAlignment, VerticalAlignment } from '../types/Types';

const TextSidebar: FC = () => {

    const { t } = useTranslation()
    const [value, setValue] = useState('');
    const [color, setColor] = useState('#000');
    const [horizontalPosition, setHorizontalPosition] = useState<HorizontalAlignment>(HorizontalAlignment.CENTER);
    const [verticalPosition, setVerticalPosition] = useState<VerticalAlignment>(VerticalAlignment.MIDDLE);
    const { addTextToActiveItem } = usePersonalityStore();

    const handleChange = (value: string) => {
        setValue(value);
    }

    const handleAddText = () => {
        if (value.trim()) {
            addTextToActiveItem({
                text: value,
                color: color,
                verticalAlignment: verticalPosition,
                alignment: horizontalPosition,
            });

            // خالی کردن فیلدها بعد از ذخیره
            setValue('');
            setColor('#000');
            setHorizontalPosition(HorizontalAlignment.CENTER);
            setVerticalPosition(VerticalAlignment.MIDDLE);
        }
    }

    return (
        <div>
            <div className='text-lg'>{t('setting.text')}</div>

            <div className='mt-8'>
                <ReactQuill
                    modules={{
                        toolbar: [
                            [{ header: '1' }, { header: '2' }, { font: [] }],
                            [{ list: 'ordered' }, { list: 'bullet' }],
                            ['bold', 'italic', 'underline'],
                            ['link', 'image'],
                            [{ align: [] }],
                            ['clean']
                        ]
                    }}
                    theme="snow"
                    value={value}
                    onChange={handleChange}
                    style={{ minHeight: '120px' }}
                    className='text-sm'
                />
            </div>

            <div className='mt-5'>
                <ColorPicker
                    changeColor={setColor}
                    label={t('setting.text_color')}
                    defaultColor={color}
                />
            </div>

            <div className='mt-5 flex justify-between'>
                <div>
                    <div className='text-sm'>
                        {t('setting.horizontal_position')}
                    </div>
                    <div className='mt-3 flex gap-4'>
                        <div
                            onClick={() => setHorizontalPosition(HorizontalAlignment.RIGHT)}
                        >
                            <AlignRight size={20} color={horizontalPosition === HorizontalAlignment.RIGHT ? '#0038FF' : '#000'} />
                        </div>
                        <div
                            onClick={() => setHorizontalPosition(HorizontalAlignment.CENTER)}
                        >
                            <AlignVertically size={20} color={horizontalPosition === HorizontalAlignment.CENTER ? '#0038FF' : '#000'} />
                        </div>
                        <div
                            onClick={() => setHorizontalPosition(HorizontalAlignment.LEFT)}
                        >
                            <AlignLeft size={20} color={horizontalPosition === HorizontalAlignment.LEFT ? '#0038FF' : '#000'} />
                        </div>
                    </div>
                </div>

                <div>
                    <div className='text-sm'>
                        {t('setting.vertical_position')}
                    </div>
                    <div className='mt-3 flex gap-4'>
                        <div
                            onClick={() => setVerticalPosition(VerticalAlignment.TOP)}
                        >
                            <AlignTop size={20} color={verticalPosition === VerticalAlignment.TOP ? '#0038FF' : '#000'} />
                        </div>
                        <div
                            onClick={() => setVerticalPosition(VerticalAlignment.MIDDLE)}
                        >
                            <AlignHorizontally size={20} color={verticalPosition === VerticalAlignment.MIDDLE ? '#0038FF' : '#000'} />
                        </div>
                        <div
                            onClick={() => setVerticalPosition(VerticalAlignment.BOTTOM)}
                        >
                            <AlignBottom size={20} color={verticalPosition === VerticalAlignment.BOTTOM ? '#0038FF' : '#000'} />
                        </div>
                    </div>
                </div>
            </div>

            <div className='mt-7'>
                <Button
                    onClick={handleAddText}
                    className='bg-[#ECEEF5] text-black'
                >
                    <div className='flex justify-center items-center gap-2'>
                        <Add size={24} color='black' />
                        <span>{t('setting.add_text')}</span>
                    </div>
                </Button>
            </div>

        </div>
    )
}

export default TextSidebar