import { FC, Fragment, useState } from 'react'
import { useTranslation } from 'react-i18next'
import Tabs from '../../components/Tabs'
import { KeySquare, Notification1 } from 'iconsax-react'
import { useGetSettings } from './hooks/useSettingData'
import Sms from './components/Sms'
import ChangePassword from './components/ChangePassword'
import TwoFactor from './components/TwoFactor'
import TitleLine from '@/components/TitleLine'
import { SettingCategoryType, SettingItemType } from './types/SettingTypes'

const Setting: FC = () => {

    const { t } = useTranslation()
    const getSettings = useGetSettings()
    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'
                        },
                        {
                            icon: <KeySquare color={activeTab === '2fa' ? 'black' : '#8C90A3'} size={22} />,
                            label: t('setting.2fa'),
                            value: '2fa'
                        },
                    ]}
                    active={activeTab}
                    onChange={setActiveTab}
                />
            </div>

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

                        <div className='flex xl:flex-row flex-wrap flex-col gap-6 text-sm mt-8'>
                            {
                                getSettings.isPending ?
                                    <div className='w-full'>
                                    </div>
                                    :
                                    getSettings.data?.data?.settings?.map((item: SettingCategoryType) => {
                                        return (
                                            <Fragment key={item.category}>
                                                <TitleLine
                                                    title={t(`setting.${item.category}`)}
                                                />
                                                {
                                                    item.settings?.map((settingItem: SettingItemType) => {
                                                        return (
                                                            <div key={settingItem.id} className='flex-1 min-w-[40%] border border-border px-4 rounded-2xl min-h-14 items-center flex justify-between'>
                                                                <div className='xl:text-[13px] text-xs'>
                                                                    {settingItem?.description}
                                                                </div>
                                                                <div className='flex xl:gap-4 gap-2'>
                                                                    {/* <div className='flex gap-2 text-xs items-center text-description'>
                                                                        <div>
                                                                            {t('setting.email')}
                                                                        </div>
                                                                        <Email id={settingItem.id} email={settingItem.email} />
                                                                    </div> */}
                                                                    <div className='flex gap-2 text-xs items-center text-description'>
                                                                        <Sms
                                                                            sms={settingItem.isActive}
                                                                            id={settingItem.id}
                                                                        />
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        )
                                                    })
                                                }
                                            </Fragment>
                                        )
                                    })
                            }
                            <div className='flex-1 px-4 min-w-[40%]'></div>
                        </div>
                    </div>
                    : activeTab === 'password' ?
                        <ChangePassword />
                        : activeTab === '2fa' ?
                            <TwoFactor />
                            : null
            }

        </div>
    )
}

export default Setting