import { FC, useState } from 'react'
import { useTranslation } from 'react-i18next'
import Tabs from '../../components/Tabs'
import { KeySquare, Notification1 } from 'iconsax-react'
import SwitchComponent from '../../components/Switch'
import Input from '../../components/Input'
import Button from '../../components/Button'

const Setting: FC = () => {

    const { t } = useTranslation('global')
    const [activeTab, setActiveTab] = useState<string>('notification')

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

            <div className='mt-10'>
                <Tabs
                    items={[
                        {
                            icon: <Notification1 color={activeTab === 'notification' ? 'black' : '#8C90A3'} size={22} />,
                            label: t('setting.notification'),
                            value: 'notification'
                        },
                        {
                            icon: <KeySquare color={activeTab === 'password' ? 'black' : '#8C90A3'} size={22} />,
                            label: t('setting.password'),
                            value: 'password'
                        },
                    ]}
                    active={activeTab}
                    onChange={setActiveTab}
                />
            </div>

            {
                activeTab === 'notification' ?
                    <div className='mt-10 bg-white p-8 rounded-3xl'>
                        <div>
                            {t('setting.setting_email_message')}
                        </div>

                        <div className='flex gap-6 text-sm mt-8'>
                            <div className='flex-1 border border-border px-4 rounded-2xl h-14 items-center flex justify-between'>
                                <div>
                                    {t('setting.notification_announcement')}
                                </div>
                                <div className='flex gap-4'>
                                    <div className='flex gap-1 text-xs items-center text-description'>
                                        <SwitchComponent
                                            active={true}
                                            onChange={() => { }}
                                        />
                                        <div>
                                            {t('setting.email')}
                                        </div>
                                    </div>
                                    <div className='flex gap-1 text-xs items-center text-description'>
                                        <SwitchComponent
                                            active={false}
                                            onChange={() => { }}
                                        />
                                        <div>
                                            {t('setting.sms')}
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div className='flex-1 border border-border px-4 rounded-2xl h-14 items-center flex justify-between'>
                                <div>
                                    {t('setting.notification_announcement')}
                                </div>
                                <div className='flex gap-4'>
                                    <div className='flex gap-1 text-xs items-center text-description'>
                                        <SwitchComponent
                                            active={true}
                                            onChange={() => { }}
                                        />
                                        <div>
                                            {t('setting.email')}
                                        </div>
                                    </div>
                                    <div className='flex gap-1 text-xs items-center text-description'>
                                        <SwitchComponent
                                            active={false}
                                            onChange={() => { }}
                                        />
                                        <div>
                                            {t('setting.sms')}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div className='flex gap-6 text-sm mt-6'>
                            <div className='flex-1 border border-border px-4 rounded-2xl h-14 items-center flex justify-between'>
                                <div>
                                    {t('setting.notification_announcement')}
                                </div>
                                <div className='flex gap-4'>
                                    <div className='flex gap-1 text-xs items-center text-description'>
                                        <SwitchComponent
                                            active={true}
                                            onChange={() => { }}
                                        />
                                        <div>
                                            {t('setting.email')}
                                        </div>
                                    </div>
                                    <div className='flex gap-1 text-xs items-center text-description'>
                                        <SwitchComponent
                                            active={false}
                                            onChange={() => { }}
                                        />
                                        <div>
                                            {t('setting.sms')}
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div className='flex-1 border border-border px-4 rounded-2xl h-14 items-center flex justify-between'>
                                <div>
                                    {t('setting.notification_announcement')}
                                </div>
                                <div className='flex gap-4'>
                                    <div className='flex gap-1 text-xs items-center text-description'>
                                        <SwitchComponent
                                            active={true}
                                            onChange={() => { }}
                                        />
                                        <div>
                                            {t('setting.email')}
                                        </div>
                                    </div>
                                    <div className='flex gap-1 text-xs items-center text-description'>
                                        <SwitchComponent
                                            active={false}
                                            onChange={() => { }}
                                        />
                                        <div>
                                            {t('setting.sms')}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    :
                    <div className='mt-10 bg-white p-8 rounded-3xl'>
                        <div>
                            {t('setting.change_password')}
                        </div>

                        <div className='flex gap-10'>
                            <div className='flex-1'>
                                <Input
                                    type='password'
                                    className='mt-6'
                                    placeholder={t('setting.current_password')}
                                />
                                <Input
                                    type='password'
                                    className='mt-6'
                                    placeholder={t('setting.new_password')}
                                />
                                <Input
                                    type='password'
                                    className='mt-6'
                                    placeholder={t('setting.reapeat_password')}
                                />

                                <div className='mt-9'>
                                    <Button
                                        label={t('setting.save_change')}
                                        className='w-32'
                                    />
                                </div>
                            </div>

                            <div className='flex-1 p-8 bg-[#EEF0F7] rounded-3xl text-sm'>
                                <div>
                                    {t('setting.password_is')}
                                </div>
                                <ul className='list-disc ps-4 flex flex-col gap-2 text-xs mt-4'>
                                    <li>
                                        {t('setting.min-8')}
                                    </li>
                                    <li>
                                        {t('setting.mix_charachter_number')}
                                    </li>
                                    <li>
                                        {t('setting.exsist_number')}
                                    </li>
                                    <li>
                                        {t('setting.exsist_special_character')}
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
            }

        </div>
    )
}

export default Setting