/* eslint-disable @typescript-eslint/no-explicit-any */
'use client'
import { FC, useEffect, useState } from 'react'
import Button from '../../../components/Button'
import { ArrowLeft } from 'iconsax-react'
import { NumberFormat } from '../../../config/func'
import Link from 'next/link'
import { DanakService } from '../types/ProductTypes'
import RadioGroup from '@/components/RadioGroup'
import Image from 'next/image'
import { CONSOLE_URL } from '@/config/const'
import { useSharedStore } from '@/shared/store/sharedStore'
type Props = {
    data: DanakService,
}

const ServiceHeader: FC<Props> = (props: Props) => {

    const { isLogin } = useSharedStore()
    const { data } = props
    const [planSelected, setPlanSelected] = useState<string>(data?.subscriptionPlans[0]?.id)
    const [price, setPrice] = useState<number>(data?.subscriptionPlans[0]?.price)
    const [finalPrice, setFinalPrice] = useState<number>(0)
    // const buyService = useBuyService()

    useEffect(() => {

        const plan: any = data?.subscriptionPlans.find((item) => item.id === planSelected)

        setFinalPrice(plan.price)
        setPrice(plan?.originalPrice)

    }, [data?.subscriptionPlans, planSelected])


    return (
        <div className='w-full p-6 bg-white rounded-3xl flex xl:flex-row flex-col items-end xl:justify-between'>
            <div className='flex w-full xl:gap-8 gap-4'>
                <div className='xl:size-[70px] xl:min-w-[70px] min-w-[50px] size-[50px] rounded-xl'>
                    <Image alt='icon' width={70} height={70} src={data?.icon} className='w-full h-full rounded-xl' />
                </div>
                <div>
                    <div>
                        {data?.name}
                    </div>

                    <p className='text-description mt-1 text-[11px]'>
                        {data?.description}
                    </p>
                    <div className='hidden xl:flex gap-5 mt-5'>
                        <RadioGroup
                            items={data?.subscriptionPlans?.map((item) => {
                                return {
                                    label: item?.name,
                                    value: item?.id
                                }
                            })}
                            onChange={setPlanSelected}
                            selected={planSelected}
                        />
                    </div>
                </div>
            </div>

            <div className='flex w-full flex-col justify-between xl:items-end'>
                <div className='xl:hidden flex gap-5 mt-5'>
                    <RadioGroup
                        items={data?.subscriptionPlans?.map((item) => {
                            return {
                                label: item?.name,
                                value: item?.id
                            }
                        })}
                        onChange={setPlanSelected}
                        selected={planSelected}
                    />
                </div>
                <div className='flex gap-4 mt-5 xl:mt-0 items-center justify-between xl:justify-normal'>
                    <div className='text-xs whitespace-nowrap flex gap-1 items-center'>
                        <div className='flex gap-2'>
                            {
                                finalPrice !== price && !!price &&
                                <div className='line-through text-xs text-description'>
                                    {NumberFormat(Number(price))}
                                </div>
                            }
                            <div>{NumberFormat(Number(finalPrice))}</div>
                        </div>
                        <span>تومان</span>
                    </div>
                    <Link target='_blank' href={`${isLogin ? CONSOLE_URL + `/other-service/buy/${data?.id}/${planSelected}` : CONSOLE_URL + '/auth/login'}?redirect=${CONSOLE_URL}/other-service/buy/${data?.id}/${planSelected}`}>
                        <Button
                            // onClick={handleBuy}
                            // isLoading={buyService.isPending}
                            className='bg-description xl:max-w-full max-w-[100px] text-xs h-8 bg-opacity-20 text-black px-4'
                        >
                            <div className='flex gap-1 items-center'>
                                <div>
                                    خرید
                                </div>
                                <ArrowLeft className='size-4' color='black' />
                            </div>
                        </Button>
                    </Link>
                </div>
            </div>
        </div>
    )
}

export default ServiceHeader