// @mui
import { styled } from '@mui/material/styles';
import { Button, Card, Typography, Link, Divider, Stack } from '@mui/material';
import { ChevronRight } from '@mui/icons-material';
// components
import Iconify from '@/components/Iconify';
// React
import { useState } from 'react';
import DialogNotification from './DialogNotification';
import DialogDetailClaim from '@/components/dialogs/DialogDetailClaim';

// ----------------------------------------------------------------------

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

type NotificationProps = {
  data?: DataContent[];
};

// ----------------------------------------------------------------------

const RootNotificationStyle = styled(Card)(({ theme }) => ({
  boxShadow: 'none',
  padding: '1rem 0.5rem',
  color: 'black',
  backgroundColor: theme.palette.grey[200],
  // maxHeight: '240px',
}));

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

// ----------------------------------------------------------------------

export default function CardNotification({ data }: NotificationProps) {
  const [openDialog, setOpenDialog] = useState(false);
  const [dialogTitle, setDialogTitle] = useState('');
  const [isDialog, setIsDialog] = useState('');

  const clickHandler = (isDialog: string) => {
    switch (isDialog) {
      case 'allNotification':
        setDialogTitle('Notification');
        setIsDialog(isDialog);
        setOpenDialog(true);
        break;
      case 'infoDetail':
        setDialogTitle('Claim Details');
        setIsDialog(isDialog);
        setOpenDialog(true);
        break;

      default:
        break;
    }
  };

  return (
    <RootNotificationStyle>
      <Stack direction="row" justifyContent="space-between" alignItems="center">
        <Typography>
          <Typography
            variant="body2"
            component="span"
            sx={{ display: 'flex', alignItems: 'center' }}
          >
            <Iconify icon="eva:bell-fill" marginRight={0.75} />
            Notification
            <span
              style={{
                width: '12px',
                height: '12px',
                backgroundColor: '#19BBBB',
                marginLeft: '0.5rem',
                borderRadius: '50%',
              }}
            />
          </Typography>
        </Typography>
        <Button
          sx={{ typography: 'body2' }}
          endIcon={<ChevronRight />}
          onClick={() => clickHandler('allNotification')}
        >
          View All
        </Button>
      </Stack>

      <ItemNotificationStyle sx={{ marginTop: 2, overflowY: 'auto', maxHeight: '180px' }}>
        {(data && data.length)
          ? data.map(({ info, date, time }, 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('infoDetail')}
                    >
                      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>
            ))
          : <Typography variant="body2" align="center">Tidak ada notifikasi</Typography>}
      </ItemNotificationStyle>

      {isDialog === 'allNotification' && (
        <DialogNotification
          openDialog={openDialog}
          setOpenDialog={setOpenDialog}
          title={{ name: dialogTitle }}
          data={data}
        />
      )}

      {isDialog === 'infoDetail' && (
        <DialogDetailClaim
          openDialog={openDialog}
          setOpenDialog={setOpenDialog}
          title={{ name: dialogTitle }}
        />
      )}
    </RootNotificationStyle>
  );
}