import React from 'react';
import { useTranslations } from 'next-intl';
import Box from '@mui/material/Box';
import { Modal } from 'antd';
import { CircularProgress } from '@mui/material';
import AppButton from '../ui/button/app-button';


const Style = {
    spin: {
        display: 'flex',
        justifyContent: 'center'
    }
};

type PropsType = {
    isLoading: boolean;
    isShow: boolean;
    setShow?: any;
    handelCancelAccount: any;
}

const CancelAccountModal = (props: PropsType) => {
    const {
        isLoading,
        isShow,
        setShow,
        handelCancelAccount,
    } = props;
    const t = useTranslations("");
    const toggle = () => !isLoading ? setShow(false) : null

    return (
        <Modal
            open={isShow}
            onCancel={toggle}
            onOk={toggle}
            title={t('title.cancelAccount')}
            footer={null}
            styles={{
                content: {
                    padding: 0
                },
                header: {
                    // paddingBottom: '1rem',
                    marginBottom: '1rem',
                    padding: '20px 24px 1rem 24px',
                    borderBottom: '1px solid #dee2e6'
                },
                body: {
                    padding: '0 24px 20px 24px',
                }
            }}
            // backdrop={backdrop}
        >
            {
                isLoading &&
                <div style={Style.spin}>
                    <CircularProgress color='primary' style={{ marginRight: 20 }} />
                    <p>{t('progress.loading')}</p>
                </div>
            }
            {
                !isLoading &&
                <React.Fragment>
                    {t('text.confirmCancelUser')}
                    <Box style={{ textAlign: 'end', padding: '10px' }}>
                        <AppButton
                            className='btn btn-info mr-1'
                            // variant='contained'
                            color='danger'
                            type='button'
                            onClick={handelCancelAccount}
                            disabled={isLoading}
                        >
                            {t('button.yesCancel')}
                        </AppButton>
                        <AppButton
                            className='btn mr-1'
                            // variant='contained'
                            type='button'
                            onClick={() => setShow(false)}
                        >
                            {t('button.cancelAccount')}
                        </AppButton>
                    </Box>
                </React.Fragment>
            }
        </Modal>
    );
};

export default CancelAccountModal;