"use client"

import { ServiceViewSettings } from "@/types/serviceAdmin";
import { makeStyles } from "tss-react/mui";
import Stepper from "@mui/material/Stepper";
import Step from "@mui/material/Step";
import StepLabel from "@mui/material/StepLabel";
import { useTranslations } from "next-intl";
import useResponsive from "@/hooks/useResponsive";
import { useRouter } from "next/navigation";
import { useAppDispatch, useAppSelector } from "@/lib/redux/hooks";
import { LAYOUT_SETTING, PaymentMethod } from "@/lib/appConstant";
import { getBodySetting, getLayoutViewPage, getServicePath, getViewSettings } from "@/lib/redux/features/serviceAdmin";
import { useEffect } from "react";
import AppButton from "../ui/button/button";
import { resetPaymentStatus } from "@/lib/redux/features/payment";

type PropsType = { viewSettings?: ServiceViewSettings };



const useStyle = makeStyles()(() => ({
    content: {
        margin: '20px 0',
        '& p': {
            width: '100%',
            display: 'block',
            textAlign: 'center'
        },
        '& ul': {
            listStylePosition: 'inside'
        },
        '& em': {
            color: '#707070'
        }
    }
}));
export default function ThankYou(props: PropsType) {
    const t = useTranslations("");
    const dispatch = useAppDispatch();
    const router = useRouter();
    const { below768, getBelow768 } = useResponsive();

    
  const viewSettings = useAppSelector(getViewSettings);
  const styleBody = useAppSelector(getBodySetting);
  const layoutViewPage = useAppSelector(getLayoutViewPage);
  const servicePath = useAppSelector(getServicePath);
  
  const isLayout3 = layoutViewPage === LAYOUT_SETTING.HOME_LAYOUT_AND_SEARCH_LAYOUT.id;

    const { classes } = useStyle();
    
    const Style = {
        content: {
            padding: '0 20px',
            height: '100%',
            width: '100%'
        },
        discountPrice: {
            color: 'red'
        },
        containerCenter: {
            width: '100%',
            display: 'flex',
            justifyContent: 'center'
        },
        customStep: {
            '$.MuiStepper-root': {
                padding: below768 ? '24px 0px' : '24px'
            }
        }
    };
    const steps = [t('label.orderEntry' ), t('label.orderComplete')];
    if (viewSettings.paymentGateway === PaymentMethod.GAKKEN_ID || viewSettings.paymentGateway === PaymentMethod.VERITRANS) {
        steps.splice(1, 0, t('label.confirmOrder'));
    }

    useEffect(() => {
        setTimeout(() => {
            dispatch(resetPaymentStatus());
        }, 5000);
    }, []);
    return (
        <div style={{ width: '100%' }}>
            <div style={Style.containerCenter}>
                <div style={{ width: !below768 ? '100%' : '100%' }}>
                    {<div className="col-12" style={{ padding: !below768 ? '20px 0 0 30px' : '20px 0 0 20px' }}>
                        {
                        isLayout3
                            ? <h4 style={{ fontWeight: 400, fontSize: 18, lineHeight: '18px', color: '#595757' }}>{t('title.orderProcedure')}</h4>
                            : <h4 style={{ fontWeight: 700 }}>{t('title.orderProcedure')}</h4>
            
                        }
                    </div>}
                    <Stepper activeStep={steps.length - 1} alternativeLabel={!!below768} style={{ backgroundColor: styleBody.backgroundColor ? styleBody.backgroundColor : '', padding: below768 ? '24px 0px' : '24px' }}>
                        {steps.map((text, index) => {
                        return (
                            <Step key={index}>
                            {
                                isLayout3
                                ? <StepLabel><span style={{ fontFamily: 'Noto Sans JP', fontSize: '13px', fontWeight: 400, lineHeight: '18.82px' }}>{text}</span></StepLabel>
                                : <StepLabel>{text}</StepLabel>
                            }
                            </Step>
                        );
                        })}
                    </Stepper>
                </div>
            </div>
            <div>
                <div style={Style.content} className={classes.content}>
                    <div dangerouslySetInnerHTML={{ __html: viewSettings.thankYouWords || '' }} />
                </div>
                <div className="text-center">
                    <AppButton
                        style={{ margin: '0 20px', backgroundColor: '#00B27B', borderColor: '#00B27B' }}
                        className="btn btn-info"
                        // variant="contained"
                        onClick={() => {
                            router.push(`${servicePath ? '/'+servicePath : ''}/`);
                        }}
                    >
                        {t('button.backToHome')}
                    </AppButton>
                </div>
            </div>
        </div>
    );

}