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 PageLoading from '../../components/PageLoading'
import Sms from './components/Sms'
import ChangePassword from './components/ChangePassword'
import TitleLine from '../../components/TitleLine'

// داده‌های استاتیک برای نمایش در صفحه
const mockSettings = {
    data: {
        settings: [
            {
                id: '1',
                category: 'activity_notifications',
                settings: [
                    {
                        id: '101',
                        description: 'اطلاع‌رسانی فعالیت‌های جدید',
                        isActive: true
                    },
                    {
                        id: '102',
                        description: 'اعلان‌های مربوط به تیکت‌ها',
                        isActive: false
                    }
                ]
            },
            {
                id: '2',
                category: 'system_notifications',
                settings: [
                    {
                        id: '201',
                        description: 'به‌روزرسانی‌های سیستم',
                        isActive: true
                    },
                    {
                        id: '202',
                        description: 'اخبار و اطلاعیه‌ها',
                        isActive: true
                    }
                ]
            }
        ]
    }
};

const Setting: FC = () => {

    const { t } = useTranslation('global')
    // 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'
                        },
                    ]}
                    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'>
                            {
                                mockSettings.data.settings.map((item: any) => {
                                    return (
                                        <Fragment key={item.id}>
                                            <TitleLine
                                                title={t(`setting.${item.category}`)}
                                            />
                                            {
                                                item.settings?.map((setting: any) => {
                                                    return (
                                                        <div key={setting.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'>
                                                                {setting?.description}
                                                            </div>
                                                            <div className='flex xl:gap-4 gap-2'>
                                                                <div className='flex gap-2 text-xs items-center text-description'>
                                                                    <Sms
                                                                        sms={setting.isActive}
                                                                        id={setting.id}
                                                                    />
                                                                </div>
                                                            </div>
                                                        </div>
                                                    )
                                                })
                                            }
                                        </Fragment>
                                    )
                                })
                            }
                            <div className='flex-1 px-4 min-w-[40%]'></div>
                        </div>
                    </div>
                    :
                    <ChangePassword />
            }

        </div>
    )
}

export default Setting