import { Add } from 'iconsax-react'
import { FC, useState } from 'react'
import DefaulModal from '../../../components/DefaulModal'
import { useTranslation } from 'react-i18next'
import Input from '../../../components/Input'
import { useGetMyServices } from '../../service/hooks/useServiceData'
import { MyServicesItem } from '../../service/types/ServiecTypes'
import PageLoading from '../../../components/PageLoading'
import { useGetQuikAccess, useQuikAccess, useRemoveQuikAccess } from '../hooks/useHomeData'
import ChangeQuikAccess from './ChangeQuikAccess'
import { useHomeStore } from '../store/HomeStore'
import { ErrorType } from '../../../helpers/types'
import { toast } from '../../../components/Toast'

const BoxNewAccessbility: FC = () => {

    const { showModal, setShowModal } = useHomeStore()
    const [search, setSearch] = useState<string>('')
    const { t } = useTranslation('global')
    const getMyservices = useGetMyServices(search)
    const getQuikAccess = useGetQuikAccess()
    const quikAccess = useQuikAccess()
    const removeQuikAceess = useRemoveQuikAccess()

    const handleQuikAccess = (value: boolean, id: string) => {
        if (value) {
            quikAccess.mutate(id, {
                onSuccess: () => {
                    getQuikAccess.refetch()
                },
                onError: (error: ErrorType) => {
                    toast(error.response?.data?.error?.message[0], 'error')
                }
            })
        } else {
            removeQuikAceess.mutate(id, {
                onSuccess: () => {
                    getQuikAccess.refetch()
                },
                onError: (error: ErrorType) => {
                    toast(error.response?.data?.error?.message[0], 'error')
                }
            })
        }
    }

    return (
        <>
            <div
                onClick={() => setShowModal(true)}
                className="flex-1 min-w-[40%] xl:p-6 p-4 xl:min-w-[20%]  flex justify-center items-center min-h-[152px]"
                style={{
                    position: 'relative',
                }}
            >
                <svg
                    width="100%"
                    height="100%"
                    xmlns="http://www.w3.org/2000/svg"
                    style={{
                        position: 'absolute',
                        top: 0,
                        left: 0,
                        zIndex: -1,
                        borderRadius: '22px',
                    }}
                >
                    <rect
                        width="100%"
                        height="100%"
                        fill="none"
                        // rx="22"
                        ry="22"
                        stroke="#8C90A3"
                        strokeWidth="2"
                        strokeDasharray="6,14"
                    // strokeDashoffset="25"
                    />
                </svg>
                <div style={{ zIndex: 1 }}>
                    <Add size={38} color="#8C90A3" />
                </div>


            </div>

            <DefaulModal
                open={showModal}
                close={() => setShowModal(false)}
                isHeader={true}
                title_header={t('home.create_new_access')}
            >
                <div className='mt-6'>
                    <div className='flex  items-center gap-6'>
                        <div className='xl:min-w-[210px] min-w-full'>
                            <Input
                                variant='search'
                                className='bg-opacity-25 bg-white'
                                onChangeSearchFinal={setSearch}
                            />
                        </div>
                    </div>

                    {
                        getMyservices.isPending ?
                            <div className='mt-6'>
                                <PageLoading />
                            </div>
                            :
                            <div className='mt-6 flex flex-wrap gap-6'>
                                {
                                    getMyservices.data?.data?.subscriptions?.length === 0 ?
                                        <div className='text-center w-full mt-4'>
                                            {
                                                search === '' ?
                                                    t('home.not_active_service')
                                                    :
                                                    t('home.cannot_find_service')
                                            }
                                        </div>
                                        :
                                        getMyservices.data?.data?.subscriptions?.map((item: MyServicesItem) => {
                                            const active = getQuikAccess.data?.data?.quickAccesses?.find((o: any) => o.userSubscription?.id === item?.id) ? true : false
                                            if (item.status === 'ACTIVE')
                                                return (
                                                    <div key={item.id} className='flex-1 gap-2 xl:min-w-[40%] min-w-full flex justify-between items-center border-b border-[#8C90A3] border-opacity-30 py-2'>
                                                        <div className='flex gap-4'>
                                                            <div className='size-10 rounded-xl overflow-hidden'>
                                                                <img src={item.plan?.service?.icon} className='size-full min-w-10' />
                                                            </div>
                                                            <div>
                                                                <div className='text-sm'>
                                                                    {item.plan.service?.name}
                                                                </div>
                                                                <div className='text-xs text-description'>
                                                                    {item.businessName}
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div>
                                                            <ChangeQuikAccess
                                                                id={item?.id}
                                                                value={active}
                                                                onChange={handleQuikAccess}
                                                            />
                                                        </div>
                                                    </div>
                                                )
                                        })
                                }
                                <div className='flex-1 min-w-[40%]'></div>
                            </div>
                    }
                </div>
            </DefaulModal>
        </>
    )
}

export default BoxNewAccessbility