import { memo } from 'react';

import { useTranslation } from 'react-i18next';

import { useResponsive } from '@/hooks/useResponsive';

import OrderSummary from './components/OrderSummary';
import PayMethodCard from './components/PayMethodCard';
import PlanCard from './components/PlanCard';
import UserInfo from './components/UserInfo';
import { useAction } from './useAction';
import { useService } from './useService';

const Pricing = memo(() => {
    const { t } = useTranslation();
    const { isMobile } = useResponsive();
    const { selectedPlanId, handlePlanClick, selectedPayMethod, handlePayMethodClick } =
        useAction();

    const { plans, payMethods } = useService();

    const selectedPlan = plans.find((plan) => plan.id === selectedPlanId) || null;

    return (
        <div className="flex items-start justify-center">
            <div className={`max-w-[1440px] w-full ${isMobile ? 'px-0' : 'px-[30px]'}`}>
                <div
                    className={`bg-[#0F1116] px-5 sm:px-5 lg:px-[100px] py-[30px] pb-[100px] flex flex-col ${isMobile ? 'gap-5 mt-0' : 'gap-10 my-[50px] rounded-[12px]'}`}
                >
                    <span
                        className={`text-white font-semibold leading-[1.43] text-center uppercase ${isMobile ? 'text-[22px]' : 'text-[35px]'}`}
                    >
                        {t('pages.pricing.title')}
                    </span>
                    <UserInfo />
                    <div className="flex flex-col gap-5">
                        <span
                            className={`text-white font-semibold leading-[1.43] ${isMobile ? 'text-[16px]' : 'text-[22px]'}`}
                        >
                            {t('pages.pricing.selecPlan')}
                        </span>
                        <div
                            className={`flex ${
                                isMobile ? 'flex-col-c gap-5' : 'flex-row-c justify-center gap-8'
                            }`}
                        >
                            {plans.map((plan) => (
                                <PlanCard
                                    key={plan.id}
                                    id={plan.id}
                                    title={plan.title}
                                    subTitle={plan.subTitle}
                                    introduce={plan.introduce}
                                    tag={plan.tag}
                                    tagType={plan.tagType}
                                    isSelected={selectedPlanId === plan.id}
                                    onClick={() => handlePlanClick(plan.id)}
                                />
                            ))}
                        </div>
                    </div>
                    <div className="flex flex-col gap-5">
                        <span
                            className={`text-white font-semibold leading-[1.43] ${isMobile ? 'text-[16px]' : 'text-[22px]'}`}
                        >
                            {t('pages.pricing.selectPayMethod')}
                        </span>
                        <div
                            className={
                                isMobile
                                    ? 'flex-col-c gap-5'
                                    : 'flex flex-wrap justify-start gap-x-8 gap-y-4 [&>*]:flex-[0_1_calc(50%-1rem)]'
                            }
                        >
                            {payMethods.map((payMethod) => (
                                <PayMethodCard
                                    key={payMethod}
                                    payMethodType={payMethod}
                                    isSelected={selectedPayMethod === payMethod}
                                    onClick={() => handlePayMethodClick(payMethod)}
                                />
                            ))}
                        </div>
                    </div>
                    <OrderSummary selectedPlan={selectedPlan} />
                </div>
            </div>
        </div>
    );
});

Pricing.displayName = 'Pricing';

export default Pricing;