// mui
import { Container, Grid, Stack, Typography } from '@mui/material';
// components
import Page from '../../components/Page';
// utils
import useSettings from '../../hooks/useSettings';
// section
import CardFamilyInformation from '../../sections/alarm-center/user-profile/CardFamilyInformation';
// react
import { useNavigate, useParams } from 'react-router-dom';
import ButtonBack from '../../components/ButtonBack';
import { useEffect, useState, useContext } from 'react';
import axios from '../../utils/axios';
// pages
import DetailTimeline from '../../sections/dashboard/DetailTimeline';
import DetailStepper from '../../sections/dashboard/DetailStepper';
import { format } from 'date-fns';
import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos';

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

export default function Detail() {
  const navigate = useNavigate();
  const { themeStretch } = useSettings();
  const [data, setData] = useState();

  const { id } = useParams();

  useEffect(() => {
    axios
      .get('/detail-claim-requests/' + id)
      .then((response) => {
        setData(response.data);
      })
      .catch((error) => {
        console.error(error);
      });

  }, []);

  return (
    <Page title="Detail">
      <Container maxWidth={themeStretch ? false : 'xl'}>
        <Stack direction="row" alignItems="center" sx={{ marginBottom: 3 }}>
          <ArrowBackIosIcon onClick={() => navigate(-1)} sx={{cursor:'pointer'}}/>
          <Typography variant="h5" sx={{marginLeft:2}}>Detail</Typography>
          {data ? (
          <Stack direction="row" spacing={2} ml="auto">
            <Typography variant="body2" sx={{color: '#757575'}}>Submission Date</Typography>
            <Typography variant="body2" fontWeight="bold">{(data && data.data) ? format(new Date(data.data.status.submission_date), "d MMM yyyy") : ''}</Typography>
          </Stack>
          ) : ''}
        </Stack>
        {data ? (
        <Grid container spacing={2}>
          <Grid item xs={12} md={12}>
            <DetailStepper data={data}/>
          </Grid>
          <Grid item xs={12} md={12}>
            <DetailTimeline data={data}/>
          </Grid>
        </Grid>
        ) : ''}
      </Container>
    </Page>
  );
}