import React, { useEffect } from 'react';

import { formatPrice } from '@/utils/functions';
import PlanHeaderImage from '../PlanHeaderImage';
import { useCheckoutContext } from '@/hooks/UseCheckout';
import { useSearchParams } from 'next/navigation';

interface PlanCardProps {
    title: string;
    price: number;
    originalPrice: number;
    selected?: boolean;
    coberturasId: string | null;
    coberturasNome: string;
    tipoCoberturasId: string;
    exibirSite: string;
    selectPlan(coberturasId: string | null, tipoCoberturasId: string | null, title: string | null): void
}

export default function PlanCard({ title, price, originalPrice, selected, selectPlan, coberturasId, tipoCoberturasId, exibirSite }: PlanCardProps) {
    const { setPlanId, setPlanTypeId, setPlanName } = useCheckoutContext();
    const searchParams = useSearchParams();
    const origem = searchParams.get("origem")

    useEffect(() => {
        if (selected && coberturasId) {
            setPlanId(coberturasId)
            setPlanTypeId(tipoCoberturasId);
            setPlanName(title);
        }
    }, [selected, coberturasId, tipoCoberturasId, title, setPlanId, setPlanTypeId, setPlanName]);

    return (
        <div className={`border w-[100%] px-5 py-5 rounded-[20px] shadow-md text-center ${selected ? 'border-plamev-blue-900 bg-plamev-blue-50' : 'border-plamev-yellow-100 bg-plamev-light-100'}`}>
            <div className="flex justify-center mb-2 h-[120px]">
                <PlanHeaderImage title={title} tipoCobertura={tipoCoberturasId} />
            </div>

            <div className='relative mt-8'>
                <div className="w-full flex justify-center -mb-1 h-[48px]">
                    {exibirSite === "SIM" ? (
                        <div className="w-[260px] sm:w-[280px] flex items-end justify-start pl-1 translate-x-8 sm:translate-x-10 mt-[20px]">
                            <span className="text-[#24A6C9] text-[0.95rem] sm:text-[1.05rem] leading-none font-extrabold tracking-tight line-through decoration-[2px]">
                                R${formatPrice(originalPrice).integerPart},{formatPrice(originalPrice).decimalPart}
                            </span>
                            <span className="text-[#24A6C9] text-[0.95rem] sm:text-[1.05rem] leading-none font-medium ml-1">
                                por
                            </span>
                        </div>
                    ) : (
                        <div className="w-[260px] sm:w-[280px]" />
                    )}
                </div>

                <div className="text-[3rem] md:text-[3rem] lg:text-[3rem] font-bold text-[--secundary] tracking-tight flex justify-center w-full font-grandstander">
                    <div>
                        <span className="text-[24px] group-hover:text-[--secundary]" style={{ textShadow: '2px 2px 0px#000', WebkitTextStroke: '1px #000' }}>R$</span>
                    </div>

                    <div className="relative flex items-center mr-20">
                        <div className="text-[4.8rem] group-hover:text-[--secundary]" style={{ textShadow: '2px 2px 0px#000', WebkitTextStroke: '1px #000' }}>
                            {formatPrice(price).integerPart}
                        </div>

                        <div className="absolute top-[-0.6rem] left-[79%] transform translate-x-1/2 text-[4.1rem] group-hover:text-[--secundary]" style={{ textShadow: '2px 2px 0px#000', WebkitTextStroke: '1px #000' }}>
                            <span>,</span>
                        </div>

                        <div className="absolute left-[70%] transform translate-x-[1rem] flex flex-col items-center">
                            <span className="text-[3rem] leading-none group-hover:text-[--secundary]" style={{ textShadow: '2px 2px 0px#000', WebkitTextStroke: '1px #000' }}>
                                {formatPrice(price).decimalPart}
                            </span>

                            <span className="text-[1.2rem] group-hover:text-[--secundary] w-[100px] mt-[-0.2rem]" style={{ textShadow: '2px 2px 0px#000', WebkitTextStroke: '1px #000' }}>
                                AO MÊS
                            </span>
                        </div>
                    </div>
                </div>
            </div>

            {!selected &&
                <button
                    className={`w-full py-2 flex items-center justify-center text-[20px] rounded-lg ${selected ? 'bg-white text-[--text-color]' : 'bg-plamev-blue-500 text-white'}`}
                    onClick={() => selectPlan(coberturasId, tipoCoberturasId, title)}
                    type='button'
                >
                    Selecionar
                </button>
            }

            {selected &&
                <button
                    className={`w-full py-2 flex items-center justify-center text-[20px] rounded-lg ${selected ? 'bg-white text-[--text-color]' : 'bg-plamev-blue-500 text-white'}`}
                    type='button'
                    disabled
                >
                    Plano Selecionado
                </button>
            }
        </div>
    );
};