import React, { FunctionComponent } from 'react';
import { KOSDrawerProps } from './KOSDrawerProps';
import {
  Box,
  Drawer,
  Typography,
  Avatar,
  Icon,
  IconButton,
} from '@mui/material/';
import Image from 'mui-image';

const KOSDrawer: FunctionComponent<KOSDrawerProps> = (props) => {
  const { open, onClose, icon, title, subTitle, total, color, iconType } =
    props;
  const useAvatar = iconType === 'avatar';

  return (
    <Drawer anchor="right" open={open} onClose={onClose}>
      <Box
        display="flex"
        flexDirection="column"
        style={{ background: '#E5E5E5', width: '400px', height: 'auto' }}
      >
        <Box
          paddingTop={3}
          paddingX={2}
          style={{
            background: '#ffff',
            position: 'sticky',
            top: 0,
            zIndex: 1,
            paddingTop: 76,
          }}
        >
          <IconButton
            size="small"
            sx={{
              bgcolor: 'white!important',
              boxShadow: '0px 4px 4px rgba(0, 0, 0, 0.25);',
              color: 'black',
              left: 8,
            }}
            onClick={onClose}
          >
            <Icon>close</Icon>
          </IconButton>
          <Box
            display="flex"
            flexDirection="row"
            paddingTop={2}
            paddingLeft={1}
            paddingBottom={1}
            justifyContent="space-between"
          >
            {useAvatar ? (
              <Avatar>
                <Image src={icon} />
              </Avatar>
            ) : (
              <Icon style={{ color: `${color}`, fontSize: 40 }}>{icon}</Icon>
            )}
            <Box display="flex" flexDirection="column">
              <Typography
                variant="h6"
                style={{
                  color: `${color}`,
                  width: '247px',
                  textTransform: 'capitalize',
                }}
              >
                {title}
              </Typography>
              <Typography variant="body2" style={{ color: `${color}` }}>
                {subTitle}
              </Typography>
            </Box>
            <Avatar sx={{ backgroundColor: `${color}` }}>{total}</Avatar>
          </Box>
        </Box>
        {props.children}
      </Box>
    </Drawer>
  );
};

KOSDrawer.defaultProps = {
  open: true,
  icon: 'delivery_dining',
  title: 'titulo ',
  subTitle: 'Subtitulo',
  total: 4,
  color: '#011A5B',
  iconType: 'icon',
};

export default KOSDrawer;