import { FC, Fragment, useState } from 'react'
import { useTranslation } from 'react-i18next'
import Input from '../../components/Input'
import Button from '../../components/Button'
import SwitchComponent from '../../components/Switch'
import { TickCircle } from 'iconsax-react'
import DatePickerComponent from '../../components/DatePicker'
import RadioGroup from '../../components/RadioGroup'
import { useFormik } from 'formik'
import { CreateDiscountType } from './types/DiscountTypes'
import * as Yup from 'yup'
import { useGetAllServices } from '../service/hooks/useServiceData'
import { ServiceItemType } from '../service/types/ServiceTypes'
import CheckBoxComponent from '../../components/CheckBoxComponent'
import { toast } from 'react-toastify'
import { useCreateDiscount } from './hooks/useDiscountData'
import { useNavigate } from 'react-router-dom'
import { Pages } from '../../config/Pages'
import { ErrorType } from '../../helpers/types'
import moment from 'moment-jalaali'

const CreateDiscount: FC = () => {

    const navigate = useNavigate()
    const { t } = useTranslation('global')
    const [serviceId, setServiceId] = useState<string[]>([])
    // const [planId, setPlanId] = useState<string>('')
    // const [customerId, setCustomerId] = useState('')
    const getServices = useGetAllServices('', 1, '', '', undefined, 50)
    // const getPlans = useGetPlans(serviceId)
    // const getCustomers = useGetCustomers()
    const createDiscount = useCreateDiscount()

    const formik = useFormik<CreateDiscountType>({
        initialValues: {
            endDate: '',
            startDate: '',
            title: '',
            type: 1,
            targetServices: [],
            direct: true,
            value: 0,
            isActive: true,
            userPhone: ''
        },
        validationSchema: Yup.object({
            value: Yup.number().required(t('errors.required')),
            endDate: Yup.string().required(t('errors.required')),
            startDate: Yup.string().required(t('errors.required')),
            title: Yup.string().required(t('errors.required')),
            type: Yup.string().required(t('errors.required')),
        }),
        onSubmit(values) {
            values.targetServices = serviceId
            values.type = +values.type
            if (values.userPhone === '') {
                values.userPhone = undefined
            }
            const params: CreateDiscountType = {
                ...values,
                startDate: moment(values.startDate, 'jYYYY-jMM-jDD').format('YYYY-MM-DD'),
                endDate: moment(values.endDate, 'jYYYY-jMM-jDD').format('YYYY-MM-DD'),
                value: +values.value
            }
            createDiscount.mutate(params, {
                onSuccess: () => {
                    toast.success(t('success'))
                    navigate(Pages.discount.list)
                },
                onError: (error: ErrorType) => {
                    toast.error(error.response?.data?.error?.message[0])
                }
            })
        },
    })
    return (
        <div className='mt-4'>
            <div className='flex justify-between items-center'>
                <div>
                    {t('discount.new_discount')}
                </div>
                <Button
                    className='w-[172px]'
                    onClick={() => formik.handleSubmit()}
                >
                    <div className='flex gap-2 items-center'>
                        <TickCircle size={20} color='white' />
                        <div>
                            {t('discount.submit')}
                        </div>
                    </div>
                </Button>
            </div>
            <div className='flex gap-6 xl:mt-8 mt-4'>
                <div className='flex-1 min-h-[calc(100vh-201px)] bg-white py-8 xl:px-10 px-4 rounded-3xl'>
                    <div className='mt-6'>
                        {t('discount.type')}
                        <div className='rowTwoInput mt-2'>
                            <RadioGroup
                                items={[
                                    {
                                        label: t('discount.direct_discount'),
                                        value: true
                                    },
                                    {
                                        label: t('discount.discount_code'),
                                        value: false
                                    }
                                ]}
                                onChange={(value) => formik.setFieldValue('direct', value)}
                                selected={formik.values.direct}
                            />
                        </div>
                    </div>
                    <div className='mt-6 rowTwoInput'>
                        <Input
                            label={t('discount.title')}
                            placeholder={t('discount.enter_discount_description')}
                            {...formik.getFieldProps('title')}
                            error_text={formik.touched.title && formik.errors.title ? formik.errors.title : ''}
                        />
                        {/* <div className='w-full sm:mt-7 flex flex-col xl:flex-row items-center'>
                            <button className='text-xs border h-[39px] xl:h-full w-full xl:w-[142px] border-black rounded-xl flex justify-center items-center gap-2'>
                                <Refresh
                                    size={18} color='black'
                                />
                                <p>
                                    {t('discount.auto_generate_code')}
                                </p>
                            </button>
                        </div> */}
                    </div>
                    <div className='mt-6 rowTwoInput'>
                        <div className='w-full'>
                            {t('discount.price')}
                            <div className='rowTwoInput mt-2'>
                                <RadioGroup
                                    items={[
                                        {
                                            label: t('discount.fixed_amount'),
                                            value: '1'
                                        },
                                        {
                                            label: t('discount.percent'),
                                            value: '0'
                                        }
                                    ]}
                                    onChange={(value) => formik.setFieldValue('type', value)}
                                    selected={formik.values.type.toString()}
                                />
                            </div>
                        </div>
                        <Input
                            label={t('discount.price_or_percent')}
                            placeholder={t('discount.enter_price_or_percent')}
                            {...formik.getFieldProps('value')}
                            error_text={formik.touched.value && formik.errors.value ? formik.errors.value : ''}
                        />
                    </div>
                    <div className='mt-6 rowTwoInput'>
                        <DatePickerComponent
                            label={t('discount.startDate')}
                            onChange={(value) => formik.setFieldValue('startDate', value)}
                            placeholder=''
                            error_text={formik.touched.startDate && formik.errors.startDate ? formik.errors.startDate : ''}
                        />
                        <DatePickerComponent
                            label={t('discount.endDate')}
                            onChange={(value) => formik.setFieldValue('endDate', value)}
                            placeholder=''
                            error_text={formik.touched.endDate && formik.errors.endDate ? formik.errors.endDate : ''}
                        />
                    </div>

                    {
                        !formik.values.direct &&
                        <div className='mt-6 rowTwoInput'>
                            <Input
                                label='شماره مشتری (اختیاری)'
                                placeholder='شماره مشتری را وارد کنید'
                                {...formik.getFieldProps('userPhone')}
                            />
                        </div>
                    }
                </div>
                <div className='min-h-[calc(100vh-201px)] bg-white w-sidebar xl:block hidden py-10 px-5 h-fit rounded-3xl'>
                    <div className='text-sm flex items-center justify-between'>
                        <p>
                            {'وضعیت تخفیف'}
                        </p>
                        <div className='flex gap-1 text-xs items-center text-description'>
                            <SwitchComponent
                                active={formik.values.isActive}
                                onChange={(value) => formik.setFieldValue('isActive', value)}
                            />
                        </div>
                    </div>

                    {
                        formik.values.direct &&
                        <Fragment>
                            <p className='mt-10 text-sm'>{t('discount.availabe_service')}</p>
                            <div className='p-2 text-sm border border-[##D0D0D0] rounded-lg mt-2'>
                                <Input
                                    variant='search'
                                    placeholder={t('header.search')}
                                />
                                {
                                    getServices.data?.data?.services?.map((item: ServiceItemType) => (
                                        <div key={item.id} className='flex gap-2 mt-3 py-2 items-center'>
                                            <div>
                                                <CheckBoxComponent
                                                    checked={serviceId.includes(item.id)}
                                                    onChange={(e) => setServiceId(e.target.checked ? [...serviceId, item.id] : serviceId.filter(id => id !== item.id))}
                                                />
                                            </div>
                                            <div className='text-xs leading-5'>
                                                {item.name}
                                            </div>
                                        </div>
                                    ))
                                }
                            </div>
                        </Fragment>
                    }

                    {/* {
                        getPlans.data &&
                        <div className='p-2 text-sm border border-[##D0D0D0] rounded-lg mt-2'>
                            {
                                getPlans.data?.data?.subscriptions?.map((item: PlanItemType) => (
                                    <div key={item.id} className='flex gap-2 mt-3 py-2 items-center'>
                                        <div>
                                            <CheckBoxComponent
                                                checked={planId === item.id}
                                                onChange={(e) => setPlanId(e.target.checked ? item.id : '')}
                                            />
                                        </div>
                                        <div className='text-xs leading-5'>
                                            {item.name}
                                        </div>
                                    </div>
                                ))
                            }
                        </div>
                    }

                    {
                        planId && getCustomers.data &&
                        <div className='p-2 text-sm border border-[##D0D0D0] rounded-lg mt-2'>
                            {
                                getCustomers.data?.data?.customers?.map((item: CustomerItemType) => (
                                    <div key={item.id} className='flex gap-2 mt-3 py-2 items-center'>
                                        <div>
                                            <CheckBoxComponent
                                                checked={customerId === item.id}
                                                onChange={(e) => setCustomerId(e.target.checked ? item.id : '')}
                                            />
                                        </div>
                                        <div className='text-xs leading-5'>
                                            {item.firstName + ' ' + item.lastName}
                                        </div>
                                    </div>
                                ))
                            }
                        </div>
                    } */}
                </div>
            </div>
        </div>
    )
}
export default CreateDiscount