"use client"

import { useParams, useRouter, useSearchParams } from "next/navigation";
import { APP_URL, AUTHEN_TYPES, BUTTON_ACTION, DURATION_MAP, IMAGE_PATH, LAYOUT_SETTING, USER_CONFIG } from "@/lib/appConstant";
import { getCompanyDomain, getContentDetailSetting, getLayoutViewPage, getPageMargin, getServicePath, getViewSettings } from "@/lib/redux/features/serviceAdmin";
import { useAppDispatch, useAppSelector } from "@/lib/redux/hooks";
import { ServiceViewSettings } from "@/types/serviceAdmin";
import { useTranslations } from "use-intl";
import { useEffect, useState } from "react";
import { getAuthInfo,  getIsAuthenticated,  getIsMobileApp } from "@/lib/redux/features/auth";
import * as _ from 'lodash';
// import { GetContentByHashtagRequest, GetContentByHashtagRequestData } from "@/types/content";
import { useMounted } from "@/hooks/useMounted";
import useResponsive from "@/hooks/useResponsive";
import { makeStyles } from "tss-react/mui";
import StorageHelper from "@/lib/storeHelper";
import Tabs from "@mui/material/Tabs";
import Tab from "@mui/material/Tab";
import { STORAGE_KEYS } from "@/types/common";
import { fetchSubscriptionDetail, fetchUserRegisterSubscriptionDetail, getIsSubscriptionDetailLoad, getSubscriptionDetail, getSubscriptionRegisteredDetails } from "@/lib/redux/features/subscription";
import AppButton from "../ui/button/button";
import { getIdRegisterSubscription, setIdRegisterSubscription } from "@/lib/redux/features/layout";
import { Col, Row, Skeleton } from "antd";
import { addTax10, formatThousandsNumber, getUserTrace, hashMD5, tax10 } from "@/lib/utils";
import { setCouponUserNull } from "@/lib/redux/features/coupon";
import { resetCreateOrderReceive, resetGakkenPaymentInfo, resetPaymentStatus } from "@/lib/redux/features/payment";
import CheckCircleOutlined from "@ant-design/icons/CheckCircleOutlined";
import LoginModal from "../modal/login-modal";
import LoginForm from "../auth/form/login-form";

const offsetLazyload = 200;
type PropsType = {};
type MakeStylesType = {
    below768: boolean;
    showPayment: boolean;
    isMegreLayout: boolean;
    style: any;
    styleButtonViewBook: any;
};


const useStyle = makeStyles<MakeStylesType>()((theme, { below768, isMegreLayout, showPayment, style, styleButtonViewBook }) => {
    return (
      {
        homeContents: {
            // width: below768 ? 'auto' : 'calc(100% - 200px)',
            flex: '1 0 auto',
            height: 'fit-content',
            padding: !showPayment && isMegreLayout ? '0px' : '16px 20.8px',
            color: style.color || '#000',
            backgroundColor: style.backgroundColor || '#fff',
            '& div': {
              color: style.color || '#000',
              backgroundColor: style.backgroundColor || '#fff'
            },
            minHeight: below768 ? '72vh' : '70.2vh'
        },
        btnWrap: {
            display: 'flex',
            justifyContent: 'center',
            width: '100%',
            marginBottom: 20
        },
        btnAction: {
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            minWidth: '50px',
            width: below768 ? '100%' : styleButtonViewBook.width ? styleButtonViewBook.width : (!below768 ? '90%' : '100%'),
            maxWidth: '100%',
            // width: !below768 ? '90%' : '100%',
            border: '2px solid',
            boxShadow: 'none!important',
            backgroundColor: styleButtonViewBook.backgroundColor || '#e26042',
            color: styleButtonViewBook.color || '#fff',
            borderColor: styleButtonViewBook.borderColor || 'transparent',
            height: below768 ? 'auto' : styleButtonViewBook.height || 'auto',
            paddingTop: styleButtonViewBook.height ? 0 : 6,
            paddingBottom: styleButtonViewBook.height ? 0 : 6,
            fontWeight: 700,
            marginTop: '1rem',
            '&:hover, &:focus, &:active': {
                backgroundColor: `${styleButtonViewBook.hoverBackgroundColor || styleButtonViewBook.backgroundColor || '#e26042a8'}!important`,
                color: `${styleButtonViewBook.hoverColor || styleButtonViewBook.color || '#fff'}!important`,
                borderColor: `${styleButtonViewBook.hoverBorderColor || styleButtonViewBook.borderColor || 'transparent'}!important`
            }
        },
        pageTitle: {
            borderTop: `1px solid ${style.borderColor || '#fff'}`,
            borderBottom: `1px solid ${style.borderColor || '#fff'}`,
            fontSize: 20,
            // padding: '8px 0',
            fontWeight: 700,
            wordBreak: 'break-word'
        },
        priceLabel: {
            fontWeight: 500
        },
        skeletonItemImage: {
            width: '100%',
            height: '100%',
            marginBottom: '0.5rem'
        },
        skeletonItemButton: {
            width: '115px!important',
            height: '45px'
        },
        smallFieldBox: {
            display: 'flex',
            flexDirection: !below768 ? 'row' : 'column',
            // flexWrap: 'wrap',
            justifyContent: 'center',
            alignItems: 'start'
        },
        noImage: {
            marginBottom: '0.5rem',
            marginRight: '0.5rem',
            position: 'relative',
            overflow: 'hidden',
            border: '1px solid #d0d0d0',
            '& img': {
                maxHeight: 300,
                maxWidth: 300,
                objectFit: 'contain',
                minWidth: 180
            },
            display: !below768 ? 'contents' : 'flex',
            width: !below768 ? 'auto' : 'fit-content',
            justifyContent: 'center'
        },
        iconButton: {
            marginRight: '0.5rem'
        },
        contentBox: {
            flex: '1 0 0px',
            minWidth: 280,
            width: !below768 ? '80%' : isMegreLayout ? '100%' : '85%',
            marginLeft: !below768 ? '10px' : (isMegreLayout ? 0 : '25px'),
            marginTop: !below768 ? '0px' : '10px'
        },
        flexDiv: {
            display: 'flex',
            justifyContent: 'center',
            width: '100%'
        },
        customCol: {
            paddingLeft: 0,
            paddingRight: 0
        },
        notPadding: {
            padding: '0 !important'
        }
      }
    );
});
export default function SubscriptionDetailsPageRender(props: PropsType) {
    const {
        // sessionActions: { login },
        // paymentActions: {
        //   resetCreateOrderReceive
        // }
    } = props;

    const t = useTranslations("");
    const dispatch = useAppDispatch();
    const router = useRouter();
    const mounted = useMounted();
    const { id: subscriptionId } = useParams() as { id: string };
    const { below768, getBelow768 } = useResponsive();
    const searchParams = useSearchParams();
    

  
    // const location = useLocation();
    const [showPayment, setShowPayment] = useState(false);
    const [showLoginFormModal, setShowLoginFormModal] = useState(false);
    const [isContinueStep, setIsContinueStep] = useState(false);
    const [isRegister, setIsRegister] = useState(false);

    const style = useAppSelector(getContentDetailSetting) || {};
    const styleButtonViewBook = style.buttons && style.buttons.length > 0
        ? style.buttons.filter(item => item.actionType === BUTTON_ACTION.VIEW_BOOK.id)[0]
        : {} as any;
    const subscriptionDetail = useAppSelector(getSubscriptionDetail);
    const isLoading = useAppSelector(getIsSubscriptionDetailLoad);
    const isPaymentSuccess = useAppSelector((state) => state.payment.isPaymentSuccess);
    const isPaymentError = useAppSelector((state) => state.payment.isPaymentError);
    const urlGakkenPayment = useAppSelector((state) => state.payment.redirectUrl);
    const isLoadingGakkenInfo = useAppSelector((state) => state.payment.isLoadingGakkenInfo);
    const isCreateOrderReceive = useAppSelector((state) => state.payment.isCreateOrderReceive);
    const isRediectUrl = useAppSelector((state) => state.payment.isRediectUrl);
    const isLoggedIn = !!useAppSelector(getIsAuthenticated);
    const subscriptionRegistered = useAppSelector(getSubscriptionRegisteredDetails);
    

    const currentDomain = useAppSelector(getCompanyDomain);
    const servicePath = useAppSelector(getServicePath) || '';
    const layoutViewPage = useAppSelector(getLayoutViewPage);
    const marginPage = useAppSelector(getPageMargin);
    const isMobileApp = useAppSelector(getIsMobileApp);
    const idRegisterSubscription = useAppSelector(getIdRegisterSubscription) || searchParams.get('idRegister');

    const { imageName, name, price, discountPrice, duration, subscriptionDiscountType, subscriptionContentGroups, nameSubscription, discount } = subscriptionDetail;

    const userStore = !servicePath || servicePath === '' ? currentDomain : servicePath;
    const isAuthen = StorageHelper.getCookie(userStore);
    const urlSubscDetail = StorageHelper.getSessionItem(STORAGE_KEYS.urlSubscDetail);
    const isMegreLayout = layoutViewPage === LAYOUT_SETTING.HOME_LAYOUT_AND_SEARCH_LAYOUT.id;


    const [initialValues, setInitValues] = useState<any>({});

    const { classes } = useStyle({ below768, isMegreLayout, showPayment, style, styleButtonViewBook });



    useEffect(() => {
        if (isMobileApp) {
            router.push(`${servicePath ? '/'+servicePath : ''}/`);
        }
    }, [isMobileApp]);
    
    useEffect(() => {
        if (isLoggedIn && (isContinueStep || urlSubscDetail)) {
            if (urlSubscDetail) {
                StorageHelper.removeSessionItem(STORAGE_KEYS.urlSubscDetail);
            }
            dispatch(setCouponUserNull());
            setShowPayment(true);
            router.push(`${servicePath ? '/'+servicePath : ''}/order-entry/${subscriptionId}`);
        }
    }, [isLoggedIn]);
    
    useEffect(() => {
        subscriptionId && dispatch(fetchSubscriptionDetail(subscriptionId));
    }, [subscriptionId, isLoggedIn]);
    
    useEffect(() => {
        if (idRegisterSubscription && subscriptionDetail) {
            dispatch(fetchUserRegisterSubscriptionDetail(idRegisterSubscription));
            setIsRegister(true);
            dispatch(setIdRegisterSubscription(undefined))
            // location.state = undefined;
        }
    }, [idRegisterSubscription, subscriptionDetail]);
    useEffect(() => {
        if (subscriptionDetail && subscriptionRegistered) {
            const { coupon } = subscriptionRegistered;
            let discountPrice = 0;
            let discountAmount = 0;
            let priceWithoutTax = 0;
            if (subscriptionRegistered.discount) {
                discountPrice = subscriptionDetail.discountPrice * Number(subscriptionRegistered.discount / 100.0);
            }
            priceWithoutTax = subscriptionDetail.discountPrice - discountPrice;
            if (coupon && typeof coupon === 'object') {
                discountAmount = Math.round(coupon.couponType === 0 ? priceWithoutTax * Number(coupon.percentage / 100.0) : (coupon.currency > priceWithoutTax ? priceWithoutTax : coupon.currency));
            }
        
            const netPrice = priceWithoutTax - discountAmount;
        
            setInitValues({
                price: '¥' + formatThousandsNumber(subscriptionDetail.price),
                netPrice: '¥' + formatThousandsNumber(netPrice),
                taxPrice: '¥' + formatThousandsNumber(tax10(netPrice)),
                totalPayment: '¥' + formatThousandsNumber(subscriptionRegistered.price),
                discountPrice: subscriptionDetail.discountPrice - discountPrice,
                couponName: coupon ? coupon.name : null,
                priceWithoutTax: '¥' + priceWithoutTax,
                discountAmount: discountAmount
            });
        }
    }, [subscriptionDetail, subscriptionRegistered]);
    
    useEffect(() => {
        if (isPaymentSuccess) {
            dispatch(resetPaymentStatus());
            dispatch(resetGakkenPaymentInfo());
        } else {
          // setIsLoadingPayment(false);
        }
    }, [isPaymentSuccess]);
    
    useEffect(() => {
        if (isPaymentError) {
            dispatch(resetPaymentStatus());
            dispatch(resetGakkenPaymentInfo());
            setShowPayment(false);
        }
    }, [isPaymentError]);
    
    const onPurchase = () => {
        if (!isAuthen) {
            setShowLoginFormModal(true);
        } else {
            dispatch(setCouponUserNull());
            setShowPayment(true);
            router.push(`${servicePath ? '/'+servicePath : ''}/order-entry/${subscriptionId}`);
        }
    };
    const cancelLoginModal = () => {
        setShowLoginFormModal(false);
    };
    const handleLoginFormSubmit = async (data, authenType) => {
        // setShowLoginFormModal(false);
        // let request;
        // if (authenType === AUTHEN_TYPES.EMAIL) {
        //     request = {
        //         password: hashMD5(data.password),
        //         rememberMe: data.rememberMe,
        //         email: data.email,
        //         loginType: AUTHEN_TYPES.EMAIL,
        //         loginRole: USER_CONFIG.USER.loginType,
        //         path: data.path
        //     };
        // } else if (authenType === AUTHEN_TYPES.GOOGLE_LOGIN) {
        //     request = data;
        // } else {
        //     const userTrace = await getUserTrace();
        //     const ip = userTrace.ip;
        //     request = {
        //         ip: ip,
        //         loginType: AUTHEN_TYPES.IP
        //     };
        // }
        // login(request);
        // setIsContinueStep(true);
    };
    
    useEffect(() => {
        if (urlGakkenPayment) {
          // setIsLoadingPayment(false);
            if (isRediectUrl) {
                window.open(`${urlGakkenPayment}`, '_self');
            } else {
                dispatch(resetCreateOrderReceive());
            }
        }
        if (!isCreateOrderReceive && urlGakkenPayment === '') {
          // setIsLoadingPayment(false);
        }
    }, [urlGakkenPayment, isCreateOrderReceive]);
    
    const returnNumberFreePeriod = _days => {
        return `${t('number.day', { days: _days })}`;
    };
    
    const renderButtonRegister = () => {
        return (
            <AppButton
                // color={'warning'}
                className={classes.btnAction}
                onClick={onPurchase}
            >
                {
                    isMegreLayout && styleButtonViewBook.isShowIcon && styleButtonViewBook.icon && styleButtonViewBook.icon !== '' &&
                    <span className={classes.iconButton}>
                        <i className={styleButtonViewBook.icon}></i>
                    </span>
                }
                {t('label.register')}
            </AppButton>
        );
    };
  
    if (isLoading || isLoadingGakkenInfo) {
        return (
            <div className={classes.homeContents + ' search-page'} id="subscription-details-page">
                <div>
                    <Row>
                        <Col span={24}>
                            <Row>
                                <Col span={8}>
                                    <div><Skeleton className={classes.skeletonItemImage} /></div>
                                </Col>
                                <Col span={16}>
                                    <div>
                                        <h5><Skeleton /></h5>
                                    </div>
                                </Col>
                            </Row>
                        </Col>
                        <Col span={24} className={'text-left'} >
                            <div><Skeleton className={classes.skeletonItemButton} /></div>
                        </Col>
                    </Row>
                </div>
            </div>
        );
    }
    
  
    return (
        <div className={classes.homeContents + ' search-page'} id="homeContents">
            {
                !showPayment &&
                <Row
                    style={{
                        marginLeft: !showPayment && isMegreLayout && marginPage.left ? below768 ? '10px' : marginPage.left : '0px',
                        marginRight: !showPayment && isMegreLayout && marginPage.right ? below768 ? '10px' : marginPage.right : '0px'
                    }}
                >
                    {
                        subscriptionDetail && ((subscriptionDetail.isRegistered && subscriptionRegistered && isRegister) || subscriptionRegistered.cancel) &&
                        <Col span={24} style={{ margin: !below768 ? '50px 0' : '' }}>
                            <h4>{t('title.subscriptionPlanPaymentHistoryDetails')}</h4>
                        </Col>
                    }
                    {
                        isMegreLayout
                        ? <>
                            <Col span={!below768 ? 12 : 24}>
                                <div className={classes.smallFieldBox} >
                                    <div style={!below768 ? {} : { width: '100%', display: 'flex', justifyContent: 'center' }}>
                                        <div className={classes.noImage}>
                                            <img src={APP_URL.UPLOAD_PATH + '/' + IMAGE_PATH.SUBSCRIPTION + imageName} />
                                        </div>
                                    </div>
                                </div>
                            </Col>
                            <Col span={!below768 ? 12 : 24}>
                                <div className={classes.contentBox}>
                                    <div className={classes.pageTitle} style={{ color: '#595757', lineHeight: '26.06px', fontSize: '18px', fontWeight: 700 }}>
                                        {`${name}`}
                                    </div>
                                    <div className={classes.priceLabel} >
                                        {
                                            isLoggedIn
                                            ? isRegister
                                                ? <h5 style={{ color: '#595757', fontSize: '13px', lineHeight: '18.82px', fontWeight: 400 }}>
                                                    <span>{`${t('label.price')}: `}</span>
                                                    {
                                                        (initialValues.discountPrice || initialValues.discountPrice === 0) && price !== initialValues.discountPrice
                                                        ? <><del style={{ fontSize: '1rem', color: '#929292' }} className="mr-2">¥{formatThousandsNumber(addTax10(price))}</del></>
                                                        : null
                                                    }
                                                    ¥{formatThousandsNumber(addTax10((initialValues.discountPrice || initialValues.discountPrice === 0) ? initialValues.discountPrice : price))}
                                                    {` (${t('label.inclusiveTax', { value: '10%' })})`}
                                                </h5>
                                                : <h5 style={{ color: '#595757', fontSize: '13px', lineHeight: '18.82px', fontWeight: 400 }}>
                                                    <span>{`${t('label.price')}: `}</span>
                                                    {
                                                        (discountPrice || discountPrice === 0) && price !== discountPrice
                                                        ? <><del style={{ fontSize: '1rem', color: '#929292' }} className="mr-2">¥{formatThousandsNumber(addTax10(price))}</del></>
                                                        : null
                                                    }
                                                    ¥{formatThousandsNumber(addTax10((discountPrice || discountPrice === 0) ? discountPrice : price))}
                                                    {` (${t('label.inclusiveTax', { value: '10%' })})`}
                                                </h5> 
                                            : <h5 style={{ color: '#595757', fontSize: '13px', lineHeight: '18.82px', fontWeight: 400 }}>
                                                <span>{`${t('label.price')}: `}</span>
                                                ¥{formatThousandsNumber(addTax10(price))}
                                                {` (${t('label.inclusiveTax', { value: '10%' })})`}
                                            </h5>
                                        }
                                    </div>
                                    <div className='mb-3'>
                                        <span style={{ color: '#999999', fontSize: '13px', lineHeight: '18.82px', fontWeight: 400 }}>
                                            {t('label.duration')}: {duration + ' ' + t(`subscription.${DURATION_MAP.get(0)}`)}
                                        </span>
                                    </div>
                                    {
                                        subscriptionDetail && !subscriptionDetail.isRegistered && !isRegister && subscriptionDetail.numberFreeTerm &&
                                        <div className="mb-3" style={{ color: '#999999', fontSize: '13px', lineHeight: '18.82px', fontWeight: 400 }}>
                                            <span>{t('label.numberFreePeriod')}: {returnNumberFreePeriod(subscriptionDetail.numberFreeTerm)}</span>
                                        </div>
                                    }
                                    {
                                        subscriptionDiscountType &&
                                        <div className={`${classes.notPadding} w-full`} style={{ display: 'flex', flexDirection: 'column', borderTop: `1px solid ${style.borderColor || '#fff'}` }}>
                                            <h5 className="justify-content-start my-2" style={{ display: 'flex', color: '#595757', fontSize: '13px', lineHeight: '18.82px', fontWeight: 400 }}>{t('label.discountDetail')}</h5>
                                            <p className="justify-content-start mb-2 px-2 text-break" style={{ display: 'flex', color: '#595757', fontSize: '13px', lineHeight: '18.82px', fontWeight: 400 }}>{t(subscriptionDiscountType === 'ORDINAL' ? 'text.discountMessageOrdinal' : 'text.discountMessage', { name: nameSubscription, discount: discount })}</p>
                                        </div>
                                    }
                                    <div className={`${classes.notPadding} card-body `} style={{ borderTop: `1px solid ${style.borderColor || '#fff'}` }}>
                                        <ul className="list-group list-group-flush pb-1">
                                            <h5 className="t-level-5 my-2" style={{ color: '#595757', fontSize: '13px', lineHeight: '18.82px', fontWeight: 400 }}>{t('label.contentGroups')}</h5>
                                            <div className="list-group-item" style={{ padding: 0, marginBottom: 10 }}>
                                                {
                                                    subscriptionContentGroups && subscriptionContentGroups.map((contentGroup, index) => {
                                                        if (index < subscriptionContentGroups.length - 1) {
                                                            return (
                                                                <span key={contentGroup.contentGroupId} style={{ color: '#999999', fontSize: '13px', lineHeight: '18.82px', fontWeight: 400 }}>
                                                                    {`${contentGroup.contentGroupName}/ `}
                                                                </span>
                                                            );
                                                        } else {
                                                            return (
                                                                <span key={contentGroup.contentGroupId} style={{ color: '#999999', fontSize: '13px', lineHeight: '18.82px', fontWeight: 400 }}>
                                                                    {contentGroup.contentGroupName}
                                                                </span>
                                                            );
                                                        }
                                                    })
                                                }
                                            </div>
                                        </ul>
                                    </div>
                                    {
                                        subscriptionDetail && subscriptionDetail.isRegistered && isRegister &&
                                        <div className='mb-3' style={{ color: '#595757', fontSize: '13px', lineHeight: '18.82px', fontWeight: 400 }}>
                                            <span>{`${t('label.freePeriodDay', { number: subscriptionDetail.numberFreeTerm })}, ${t('label.periodDay', { number: subscriptionDetail.duration })}, ${t('label.renewalDay', { number: subscriptionDetail.notifyBeforeRenewal })}`}</span>
                                        </div>
                                    }
                                    {
                                        subscriptionDetail && subscriptionDetail.isRegistered && isRegister && initialValues.couponName &&
                                        <div className='mb-3'>
                                            <span>{`${t('label.couponUsed')}: ${initialValues.couponName}`}</span>
                                        </div>
                                    }
                                    {subscriptionDetail && subscriptionDetail.description && <div className="mb-3" style={{ color: '#595757', fontSize: '13px', lineHeight: '18.82px', fontWeight: 400 }}>
                                    <div style={{ width: '100%', wordBreak: 'break-word', color: '#595757', fontSize: '13px', lineHeight: '18.82px', fontWeight: 400 }}> {subscriptionDetail.description.includes('\n') ? subscriptionDetail.description.split('\n').map((t, key) => {
                                        return <p key={key}>{t}</p>;
                                    }) : subscriptionDetail.description}</div>
                                    </div>}
                                    {
                                        subscriptionDetail && !subscriptionDetail.isRegistered && !isRegister &&
                                        <div className={classes.btnWrap}>
                                            { renderButtonRegister() }
                                        </div>
                                    }
                                </div>
                                {
                                    subscriptionRegistered && subscriptionRegistered.id && (subscriptionDetail.isRegistered || isRegister) &&
                                    <Row style={{ margin: below768 ? '' : '0px -5px', color: '#585757', fontSize: '13px', lineHeight: '18.82px', fontWeight: 400 }}>
                                        <Col span={24}><hr style={{ borderTop: '1px solid ' }} /></Col>
                                        <Col span={16} className="mb-2">
                                            <span >{`${t('label.price')}  (${t('label.withoutTax')})`}: </span>
                                        </Col>
                                        <Col span={8} className="mb-2" style={{ textAlign: 'right' }}>
                                            <span>{initialValues.priceWithoutTax}</span>
                                        </Col>
                                        <Col span={16} className="mb-2">
                                            <span style={{ color: 'red' }}>{t('label.discountAmount')}:</span>
                                        </Col>
                                        <Col span={8} className="mb-2" style={{ textAlign: 'right' }}>
                                            <span style={{ color: 'red' }}>{`- ¥${initialValues.discountAmount}`}</span>
                                        </Col>
                                        <Col span={16} className="mb-2">
                                            <span >{`${t('label.totalAmount')} (${t('label.withoutTax')})`}: </span>
                                        </Col>
                                        <Col span={8} className="mb-2" style={{ textAlign: 'right' }}>
                                            <span>{initialValues.netPrice}</span>
                                        </Col>
                                        <Col span={16} className="mb-2">
                                            <span>{`${t('label.consumptionTax', { value: '10%' })}: `}</span>
                                        </Col>
                                        <Col span={8} className="mb-2" style={{ textAlign: 'right' }}>
                                            <span>{initialValues.taxPrice}</span>
                                        </Col>
                                        <Col span={16} className="mb-2">
                                            <span style={{ color: '#595757', lineHeight: '26.06px', fontSize: '18px', fontWeight: 700 }}>{`${t('label.toalPaymentAmount')}: `}</span>
                                        </Col>
                                        <Col span={8} className="mb-2" style={{ textAlign: 'right', color: '#595757', lineHeight: '26.06px', fontSize: '18px', fontWeight: 700 }}>
                                            <span>{initialValues.totalPayment}</span>
                                        </Col>
                                        <Col span={24}><hr style={{ borderTop: '1px solid ' }} /></Col>
                                    </Row>
                                }
                            </Col>
                        </> 
                        : <>
                            <Col span={!below768 ? 12 : 24}>
                                <div className={classes.smallFieldBox} >
                                    <div style={!below768 ? {} : { width: '100%', display: 'flex', justifyContent: 'center' }}>
                                        <div className={classes.noImage}>
                                            <img src={APP_URL.UPLOAD_PATH + '/' + IMAGE_PATH.SUBSCRIPTION + imageName} />
                                        </div>
                                    </div>
                                </div>
                            </Col>
                            <Col span={!below768 ? 12 : 24} className={classes.customCol}>
                                <div className={classes.contentBox}>
                                    <div className={classes.pageTitle} >
                                        {`${name}`}
                                    </div>
                                    <div className={classes.priceLabel} >
                                    {
                                        isLoggedIn
                                        ? isRegister
                                            ? <h5 className="text-bold">
                                            <span>{`${t('label.price')}: `}</span>
                                            {
                                                (initialValues.discountPrice || initialValues.discountPrice === 0) && price !== initialValues.discountPrice
                                                ? <><del style={{ fontSize: '1rem', color: '#929292' }} className="mr-2">¥{formatThousandsNumber(addTax10(price))}</del></>
                                                : null
                                            }
                                            ¥{formatThousandsNumber(addTax10((initialValues.discountPrice || initialValues.discountPrice === 0) ? initialValues.discountPrice : price))}
                                            {` (${t('label.inclusiveTax', { value: '10%' })})`}
                                            </h5>
                                            : <h5 className="text-bold">
                                                <span>{`${t('label.price')}: `}</span>
                                                {
                                                    (discountPrice || discountPrice === 0) && price !== discountPrice
                                                    ? <><del style={{ fontSize: '1rem', color: '#929292' }} className="mr-2">¥{formatThousandsNumber(addTax10(price))}</del></>
                                                    : null
                                                }
                                                ¥{formatThousandsNumber(addTax10((discountPrice || discountPrice === 0) ? discountPrice : price))}
                                                {` (${t('label.inclusiveTax', { value: '10%' })})`}
                                            </h5> 
                                        : <h5 className="text-bold">
                                            <span>{`${t('label.price')}: `}</span>
                                            ¥{formatThousandsNumber(addTax10(price))}
                                            {` (${t('label.inclusiveTax', { value: '10%' })})`}
                                        </h5>
                                    }
                                    </div>
                                    <div className='mb-3'>
                                        <span>{t('label.duration')}: {duration + ' ' + t(`subscription.${DURATION_MAP.get(0)}`)}</span>
                                    </div>
                                    
                                    {
                                        (subscriptionDetail && !subscriptionDetail.isRegistered && !isRegister && subscriptionDetail.numberFreeTerm)
                                        ? <div className="mb-3">
                                            <span>{t('label.numberFreePeriod')}: {returnNumberFreePeriod(subscriptionDetail.numberFreeTerm)}</span>
                                        </div>
                                        : null
                                    }
                                    {
                                        subscriptionDiscountType &&
                                        <div className={`${classes.notPadding} w-full`}style={{ display: 'flex', flexDirection: 'column', borderTop: `1px solid ${style.borderColor || '#fff'}` }}>
                                            <h5 className="justify-content-start my-2" style={{ display: 'flex' }}>{t('label.discountDetail')}</h5>
                                            <p className="justify-content-start mb-2 px-2 text-break" style={{ display: 'flex' }}>
                                                {t(subscriptionDiscountType === 'ORDINAL' ? 'text.discountMessageOrdinal' : 'text.discountMessage', { name: nameSubscription, discount: discount })}
                                            </p>
                                        </div>
                                    }
                                    <div className={`${classes.notPadding} card-body`} style={{ borderTop: `1px solid ${style.borderColor || '#fff'}` }}>
                                        <ul className="list-group list-group-flush pb-1">
                                            <h5 className="t-level-5 my-2">{t('label.contentGroups')}</h5>
                                            <div className="list-group-item">
                                            {
                                                subscriptionContentGroups && subscriptionContentGroups.map(contentGroup => {
                                                return (
                                                    <div key={contentGroup.contentGroupId}>
                                                        <CheckCircleOutlined className="text-success mr-1"/>
                                                        {contentGroup.contentGroupName}
                                                    </div>
                                                );
                                                })
                                            }
                                            </div>
                                        </ul>
                                    </div>
                                    {
                                        subscriptionDetail && subscriptionDetail.isRegistered && isRegister &&
                                        <div className='mb-3'>
                                            <span>{`${t('label.freePeriodDay', { number: subscriptionDetail.numberFreeTerm })}, ${t('label.periodDay', { number: subscriptionDetail.duration })}, ${t('label.renewalDay', { number: subscriptionDetail.notifyBeforeRenewal })}`}</span>
                                        </div>
                                    }
                                    {
                                        subscriptionDetail && subscriptionDetail.isRegistered && isRegister && initialValues.couponName &&
                                        <div className='mb-3'>
                                            <span>{`${t('label.couponUsed')}: ${initialValues.couponName}`}</span>
                                        </div>
                                    }
                                    {
                                        subscriptionDetail && !subscriptionDetail.isRegistered && !isRegister && subscriptionDetail.description &&
                                        <div className="mb-3" style={{ marginLeft: `${!below768 ? '0px' : '20px'}` }}>
                                            <div style={{ width: '100%', wordBreak: 'break-word' }}>
                                                {
                                                    subscriptionDetail.description.includes('\n')
                                                    ? subscriptionDetail.description.split('\n').map((t:any, key: number) => {
                                                            return <p key={key} style={{ marginLeft: '8px' }}>{t}</p>;
                                                        }) 
                                                    : subscriptionDetail.description
                                                }
                                            </div>
                                        </div>
                                    }
                                    {
                                        subscriptionDetail && !subscriptionDetail.isRegistered && !isRegister &&
                                        <div className={classes.btnWrap}>
                                            { renderButtonRegister() }
                                        </div>
                                    }
                                </div>
                                {
                                    subscriptionRegistered && subscriptionRegistered.id && (subscriptionDetail.isRegistered || isRegister) &&
                                    <Row style={{ margin: below768 ? '0px 10px' : '0px -5px' }}>
                                        <Col span={24}><hr style={{ borderTop: '1px solid ' }} /></Col>
                                        <Col span={16} className="mb-2">
                                            <span >{`${t('label.price')}  (${t('label.withoutTax')})`}: </span>
                                        </Col>
                                        <Col span={8} className="mb-2" style={{ textAlign: 'right' }}>
                                            <span>{initialValues.priceWithoutTax}</span>
                                        </Col>
                                        <Col span={16} className="mb-2">
                                            <span style={{ color: 'red' }}>{t('label.discountAmount')}:</span>
                                        </Col>
                                        <Col span={8} className="mb-2" style={{ textAlign: 'right' }}>
                                            <span style={{ color: 'red' }}>{`- ¥${initialValues.discountAmount}`}</span>
                                        </Col>
                                        <Col span={16} className="mb-2">
                                            <span >{`${t('label.totalAmount')} (${t('label.withoutTax')})`}: </span>
                                        </Col>
                                        <Col span={8} className="mb-2" style={{ textAlign: 'right' }}>
                                            <span>{initialValues.netPrice}</span>
                                        </Col>
                                        <Col span={16} className="mb-2">
                                            <span>{`${t('label.consumptionTax', { value: '10%' })}: `}</span>
                                        </Col>
                                        <Col span={8} className="mb-2" style={{ textAlign: 'right' }}>
                                            <span>{initialValues.taxPrice}</span>
                                        </Col>
                                        <Col span={16} className="mb-2">
                                            <span style={{ fontWeight: 'bold' }}>{`${t('label.toalPaymentAmount')}: `}</span>
                                        </Col>
                                        <Col span={8} className="mb-2" style={{ textAlign: 'right', fontWeight: 'bold' }}>
                                            <span>{initialValues.totalPayment}</span>
                                        </Col>
                                        <Col span={24}><hr style={{ borderTop: '1px solid ' }} /></Col>
                                    </Row>
                                }
                            </Col>
                        </>
                    }
                     <LoginModal
                        isOpen={showLoginFormModal}
                        toggle={() => cancelLoginModal()}
                        size="middle"
                        // backdrop={'static'}
                        className="mx-4 my-4"
                    >
                        <div className="mx-4 my-4 pl-5 pr-5">
                            <LoginForm notChangeRouter={true}
                                handleBeforeSubmit={() => {
                                    cancelLoginModal();
                                }}
                                handleSuccess={() => {
                                window && window.location.reload();
                                }}
                            />
                        </div>
                        {/* {`<LoginEndUserForm
                        onCancel={() => setShowLoginFormModal(false)}
                        onSubmit={handleLoginFormSubmit}
                        />`} */}
                    </LoginModal>
                </Row>
            }
        </div>
    );
}