/* eslint-disable react/prop-types */
import { Livemode, usePaymentContext } from '@blocklet/payment-react';
import { Close } from '@mui/icons-material';
import { Box, Button, Divider, Drawer, Stack, Typography } from '@mui/material';
import { styled } from '@mui/system';
import noop from 'lodash/noop';
import React, { useState } from 'react';
import useBus from 'use-bus';

type Props = {
  icon: React.ReactNode;
  text: string;
  addons?: React.ReactNode;
  children: React.ReactNode;
  width?: number;
  open?: boolean;
  style?: Record<string, any>;
  onClose?: Function;
  hideLiveMode?: boolean;
  footer?: React.ReactNode;
};

export default function DrawerForm(rawProps: Props) {
  const props = Object.assign(
    {
      style: {},
      open: false,
      width: 960,
      onClose: noop,
      hideLiveMode: false,
      footer: null,
      addons: null,
    },
    rawProps
  );
  const [open, setOpen] = useState(props.open);
  const settings = usePaymentContext();
  const handleClose = () => {
    setOpen(false);
    if (props.onClose) {
      props.onClose();
    }
  };

  useBus('drawer.submitted', handleClose, []);

  return (
    <>
      {props.open === false && (
        <Button variant="contained" size="small" color="primary" onClick={() => setOpen(true)}>
          {props.icon}
          {props.text}
        </Button>
      )}
      <Container
        anchor="right"
        open={open}
        onClose={handleClose}
        sx={props.style || {}}
        width={props.width}
        disableEscapeKeyDown
        disableScrollLock>
        <Stack
          direction="row"
          className="drawer-form-header-wrapper"
          sx={{
            alignItems: 'center',
            justifyContent: 'space-between',
            flexWrap: 'wrap',
            pl: 3,
            pr: 3,
            pb: 2,
            pt: 2,
            gap: 1,
            borderBottom: '1px solid',
            borderColor: 'divider',

            '@media (max-width: 600px)': {
              '& > .addons-wrapper': {
                width: '100%',
                justifyContent: 'flex-end',
                '& > .addons-divider': {
                  display: 'none',
                },
              },
            },
          }}>
          <Box
            sx={{
              flex: 1,
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'space-between',
            }}>
            <Stack
              direction="row"
              sx={{
                alignItems: 'center',
              }}>
              <Typography className="drawer-form-header" variant="h6" sx={{ fontWeight: 600 }}>
                {props.text}
              </Typography>
              {!settings.livemode && !props.hideLiveMode && <Livemode />}
            </Stack>
            <Stack
              direction="row"
              sx={{
                alignItems: 'center',
                justifyContent: 'space-between',
              }}>
              <Close
                sx={{ mr: props.addons ? 1 : 0, color: 'text.secondary', cursor: 'pointer' }}
                onClick={handleClose}
              />
            </Stack>
          </Box>
          <Box
            className="addons-wrapper"
            sx={{
              display: 'flex',
              alignItems: 'center',
            }}>
            {props.addons && <Divider orientation="vertical" flexItem sx={{ mr: 2 }} className="addons-divider" />}
            {props.addons}
          </Box>
        </Stack>
        <Box className="drawer-form-body" sx={{ mx: 3, my: 2 }}>
          {props.children}
        </Box>
        {props.footer && (
          <Box className="drawer-form-footer">
            <Divider sx={{ mb: 2 }} />
            {props.footer}
          </Box>
        )}
      </Container>
    </>
  );
}

const Container = styled<any>(Drawer)`
  > .MuiPaper-root {
    width: 100%;
    min-width: 360px;
    max-width: ${(props) => props.width}px;
  }
  .drawer-form-footer {
    padding: 0 20px 24px;
    background: ${({ theme }) => theme.palette.background.paper};
  }
  @media (max-width: ${({ theme }) => theme.breakpoints.values.sm}px) {
    .drawer-form-header-wrapper {
      position: sticky;
      top: 0;
      background: ${({ theme }) => theme.palette.background.paper};
      z-index: 999;
    }
    .drawer-form-footer {
      position: sticky;
      bottom: 0;
      z-index: 999;
    }
  }
`;
