import React, { useState } from 'react';
import { Button } from 'reactstrap';

import { cancelAccount, getIsAcountLoading, getUserInfo } from '@/lib/redux/features/account';
import { useAppDispatch, useAppSelector } from '@/lib/redux/hooks';
import { useTranslations } from 'use-intl';
import useResponsive from '@/hooks/useResponsive';
import CancelAccountModal from '../modal/cancel-account-modal';
import AppButton from '../ui/button/app-button';

type PropsType = {
    isMegreLayout?: boolean;
}
const UserCancelAccount = (props: PropsType) => {
    const {
        isMegreLayout
    } = props;

    const t = useTranslations("");
    const dispatch = useAppDispatch();
    const { below768 } = useResponsive();
    const accountDetail = useAppSelector(getUserInfo);
    const isLoading = useAppSelector(getIsAcountLoading);
  


    const [isShow, setShow] = useState(false);

    const handelCancelAccount = () => {
        dispatch(cancelAccount(accountDetail.id));
    };

    if (isMegreLayout) {
        return (
            <React.Fragment>
                <AppButton
                    className='btn btn-info mr-1 w-full'
                    // variant='contained'
                    color='danger'
                    type='button'
                    style={{ backgroundColor: below768 ? '#E44A4A' : 'white', width: '100%', border: '1px solid #d0d0d0', color: below768 ? '#ffffff' : '#000', marginBottom: 20 }}
                    onClick={() => setShow(true)}
                >
                    {t('button.withDraw')}
                </AppButton>
                <CancelAccountModal isLoading={isLoading} isShow={isShow} setShow={setShow} handelCancelAccount={handelCancelAccount}/>
            </React.Fragment>
        );
    } else {
        return (
            <React.Fragment>
                <AppButton
                    className='btn btn-info py-1 px-1'
                    color='danger'
                    type='button'
                    onClick={() => setShow(true)}
                >
                    {t('button.withDraw')}
                </AppButton>
                <CancelAccountModal isLoading={isLoading} isShow={isShow} setShow={setShow} handelCancelAccount={handelCancelAccount}/>
            </React.Fragment>
        );
    }
};

export default UserCancelAccount;