import { FC } from 'react'
import { useTranslation } from 'react-i18next'
import Input from '../../components/Input'
import Textarea from '../../components/Textarea'
import UploadBox from '../../components/UploadBox'
import Button from '../../components/Button'
import { CloseCircle, InfoCircle } from 'iconsax-react'

const TicketDetail: FC = () => {

    const { t } = useTranslation('global')

    return (
        <div className='mt-4'>
            <div className='flex gap-1'>
                <div>{t('ticket.ticket_number')}</div>
                <div>12312</div>
            </div>
            <div className='flex xl:flex-row flex-col-reverse gap-6 xl:mt-8 mt-6'>
                <div className='flex-1 bg-white py-8 xl:px-10 px-4 rounded-3xl'>
                    <div className='gap-6 rowTwoInput'>
                        <Input
                            label={t('ticket.select_your_service')}
                            value={'دی منو'}
                            readOnly
                        />
                        <Input
                            label={t('ticket.user_name')}
                            value={'مهرداد مظفری'}
                            readOnly
                        />
                    </div>

                    <div className='mt-8 xl:text-sm text-xs'>
                        موضوع درخواست پشتیبانی
                    </div>

                    <div className='mt-6 xl:text-sm text-xs bg-[#F6F7FA] p-6 rounded-3xl rounded-tr-none xl:max-w-[70%] max-w-[90%]'>
                        <div className='leading-7'>
                            لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد،
                        </div>
                        <div className='flex justify-end mt-6 text-xs text-description'>
                            10:07  |  1403/09/30
                        </div>
                    </div>

                    <div className='w-full flex justify-end'>
                        <div className='mt-6 xl:text-sm text-xs bg-[#EBEDF5] p-6 rounded-3xl rounded-tl-none xl:max-w-[70%] max-w-[90%]'>
                            <div className='flex gap-1'>
                                <div className='font-bold'>
                                    {t('ticket.expert')}
                                </div>
                                <div>سیما فرهادی</div>
                            </div>
                            <div className='leading-7 mt-4'>
                                لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد،
                            </div>
                            <div className='flex justify-end mt-6 text-xs text-description'>
                                10:07  |  1403/09/30
                            </div>
                        </div>
                    </div>

                    <div className='mt-9'>
                        <Textarea
                            label={t('ticket.answer')}
                            placeholder={t('ticket.your_description')}
                        />
                    </div>

                    <div className='mt-7'>
                        <UploadBox
                            label={t('ticket.attachment')}
                        />
                    </div>

                    <div className='flex justify-end mt-6'>
                        <Button
                            label={t('ticket.send')}
                            className='max-w-[100px]'
                        />
                    </div>
                    <div className='h-8'></div>
                </div>
                <div className={`h-fit xl:w-sidebar w-full`}>
                    <div className='bg-white xl:p-6 p-4 rounded-3xl flex gap-4'>
                        <Button
                            label={t('ticket.send_answer')}
                            className='text-xs xl:h-10 h-8'
                        />
                        <Button
                            className='bg-[#D52903] xl:h-10 h-8'
                        >
                            <div className='flex gap-2 text-xs items-center'>
                                <CloseCircle
                                    color='white'
                                    size={20}
                                />
                                <div>
                                    {t('ticket.close_ticket')}
                                </div>
                            </div>
                        </Button>
                    </div>
                    <div className='bg-white p-6 rounded-3xl mt-8'>
                        <div className='flex justify-between'>
                            <div className='text-sm'>
                                {t('ticket.info_ticket')}
                            </div>
                            <div className='h-7 px-3 rounded-xl flex items-center text-xs bg-green-100 text-green-400'>
                                {t('ticket.answered')}
                            </div>
                        </div>

                        <div className='mt-14 text-xs w-full'>
                            <div className='flex justify-between text-description'>
                                <div>{t('ticket.ticket_number')}</div>
                                <div>
                                    ۱۲۳۴۵۵
                                </div>
                            </div>
                            <div className='flex mt-6 justify-between text-description'>
                                <div>{t('ticket.ticket_number')}</div>
                                <div>
                                    ۱۲۳۴۵۵
                                </div>
                            </div>
                            <div className='flex mt-6 justify-between text-description'>
                                <div>{t('ticket.ticket_number')}</div>
                                <div>
                                    ۱۲۳۴۵۵
                                </div>
                            </div>
                            <div className='flex mt-6 justify-between text-description'>
                                <div>{t('ticket.ticket_number')}</div>
                                <div>
                                    ۱۲۳۴۵۵
                                </div>
                            </div>

                        </div>

                        <div className='mt-10 border-t text-xs pt-5 border-border items-center flex gap-2'>
                            <InfoCircle size={20} color='black' />
                            <div>
                                {t('ticket.update_sms')}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    )
}

export default TicketDetail