// react
import { ReactElement, useState } from 'react';
// mui
import { Card, Divider, Link, Stack, Typography } from '@mui/material';
import { styled } from '@mui/material/styles';
// Component
import MuiDialog from '../../components/MuiDialog';
import DialogDetailClaim from '@/components/dialogs/DialogDetailClaim';
// Sections

type DataContent = {
  info: string;
  date: string;
  time: string;
};

type MuiDialogProps = {
  title?: {
    name?: string;
    icon?: string;
  };
  openDialog: boolean;
  setOpenDialog: Function;
  content?: ReactElement;
  data?: DataContent[];
};

const ItemNotificationStyle = styled(Card)(({ theme }) => ({
  boxShadow: 'none',
  padding: theme.spacing(1),
  borderRadius: 0.5,
  color: 'black',
}));

const DialogNotification = ({ title, openDialog, setOpenDialog, data }: MuiDialogProps) => {
  const [openDialogClaim, setOpenDialogClaim] = useState(false);
  const [dialogTitleClaim, setDialogTitleClaim] = useState('');

  const clickHandler = () => {
    setDialogTitleClaim('Claim Details');
    setOpenDialogClaim(true);
  };

  const getContent = () => (
    <Stack sx={{ marginTop: 2 }}>
      <ItemNotificationStyle>
        {data
          ? data.map(({ info, date, time }: DataContent, key) => (
              <div key={key}>
                {key >= 1 ? <Divider sx={{ marginY: 0.5 }} /> : ''}
                <Stack direction="row" justifyContent="space-between" alignItems="center">
                  <Stack direction="column" justifyContent="flex-start" alignItems="flex-start">
                    <Typography sx={{ typography: 'caption' }}>{info}</Typography>
                    <Link
                      component="button"
                      variant="caption"
                      underline="always"
                      onClick={clickHandler}
                    >
                      Info Detail
                    </Link>
                  </Stack>
                  <Stack direction="column" justifyContent="flex-start" alignItems="flex-start">
                    <Typography sx={{ typography: 'caption', color: '#656565' }}>{date}</Typography>
                    <Typography sx={{ typography: 'caption', color: '#656565' }}>{time}</Typography>
                  </Stack>
                </Stack>
              </div>
            ))
          : ''}
      </ItemNotificationStyle>
    </Stack>
  );

  return (
    <>
      <MuiDialog
        title={title}
        openDialog={openDialog}
        setOpenDialog={setOpenDialog}
        content={getContent()}
      />

      <DialogDetailClaim
        openDialog={openDialogClaim}
        setOpenDialog={setOpenDialogClaim}
        title={{ name: dialogTitleClaim }}
      />
    </>
  );
};

export default DialogNotification;
