import { FC, useEffect, useState } from 'react'
import { ArrowRight } from 'iconsax-react'
import { ServiceDetailDataType } from '../types/ServiecTypes'
import { NumberFormat } from '../../../config/func'
import { useTranslation } from 'react-i18next'
import { useNavigate } from 'react-router-dom'
import { Pages } from '../../../config/Pages'

type Props = {
    data: ServiceDetailDataType,
    planId?: string
}

const HeaderBuy: FC<Props> = ({ data, planId }) => {

    const navigate = useNavigate()
    const { t } = useTranslation('global')
    const [planSelected] = useState<string>(planId ? planId : '')
    const [price, setPrice] = useState<number>(data?.subscriptionPlans[0]?.price)
    const [planText, setPlanText] = useState<string>('')

    useEffect(() => {

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

        setPlanText(plan.name)
        setPrice(plan?.price)

    }, [data])


    return (
        <div>
            <div className='p-6 bg-white rounded-3xl'>
                <div className='flex justify-between items-center'>
                    <div onClick={() => navigate(Pages.services.detail + data.slug)} className='flex cursor-pointer gap-1.5'>
                        <ArrowRight className='size-4' color='#888888' />
                        <div className='text-xs text-description'>
                            {t('service.back')}
                        </div>
                    </div>

                    <div className='h-8 bg-[#EAEDF5] px-9 text-xs pt-[9px] rounded-full items-center'>
                        {planText}
                    </div>
                </div>
                <div className='w-full items-end mt-6 flex xl:flex-row flex-col xl:justify-between'>
                    <div className='flex w-full xl:gap-8 gap-4'>
                        <div className='xl:size-[70px] size-[50px] rounded-xl'>
                            <img src={data?.icon} className='w-full h-full rounded-xl' />
                        </div>
                        <div>
                            <div>
                                {data?.name}
                            </div>
                            {/* <div className='text-xs xl:mt-3 mt-1.5 text-[#4E505A]'>
                                {data?.title}
                            </div> */}
                            <p className='text-description mt-1 text-[11px]'>
                                {data?.description}
                            </p>
                        </div>
                    </div>

                    <div className='flex flex-col justify-between xl:items-end'>
                        <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 &&
                                        <div className='line-through text-xs text-description'>
                                            {NumberFormat(Number(price))}
                                        </div>
                                    } */}
                                    <div>{price === 0 ? t('free') : NumberFormat(Number(price)) + ' ' + t('toman')}</div>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>


        </div>
    )
}

export default HeaderBuy