import { FC, useState } from 'react'
import { useGetUsers } from '../../users/hooks/useUserData'
import { useTranslation } from 'react-i18next'
import { UserItemType } from '../../users/types/UserTypes'
import CheckBoxComponent from '../../../components/CheckBoxComponent'
import { useParams } from 'react-router-dom'
import { useReferTicket } from '../hooks/useTicketData'
import Button from '../../../components/Button'

type Props = {
    refetch: () => void
}

const ReferTicket: FC<Props> = ({ refetch }) => {

    const { t } = useTranslation('global')
    const { id } = useParams()
    const [userId, setUserId] = useState<string>('')
    const getUsers = useGetUsers('', 'tickets')
    const referTicket = useReferTicket()

    const handleReferTicket = () => {
        referTicket.mutate({ id: id as string, userId }, {
            onSuccess: () => {
                refetch()
            }
        })
    }

    return (
        <div className={'bg-white p-6 rounded-3xl mt-8'}>
            <div className='flex justify-between'>
                <div className='text-sm'>
                    {t('ticket.refer_ticket')}
                </div>
            </div>

            <div className="mt-4">
                {
                    getUsers.data?.data?.users?.map((item: UserItemType) => (
                        <div key={item.id} className='flex gap-2 items-center'>
                            <div>
                                <CheckBoxComponent
                                    checked={userId === item.id}
                                    onChange={(e) => setUserId(e.target.checked ? item.id : '')}
                                />
                            </div>
                            <div className='text-xs leading-5'>
                                {item.firstName + ' ' + item.lastName}
                            </div>
                        </div>
                    ))
                }

                <div className='flex justify-end mt-4'>
                    <Button
                        label={t('ticket.refer_ticket')}
                        onClick={handleReferTicket}
                        isLoading={referTicket.isPending}
                        className='w-fit px-7'
                    />
                </div>
            </div>

        </div>
    )
}

export default ReferTicket