// mui
import { IconButton, Container, Grid, Stack, Typography } from '@mui/material';
// components
import Page from '../../components/Page';
import Iconify from '../../components/Iconify';
// utils
import useSettings from '../../hooks/useSettings';
// section
import CardPersonalInformation from '../../sections/alarm-center/user-profile/CardPersonalInformation';
import CardFamilyInformation from '../../sections/alarm-center/user-profile/CardFamilyInformation';
import CardPolicyNumber from '../../sections/alarm-center/user-profile/CardPolicyNumber';
import CardBenefitSummary from '../../sections/alarm-center/user-profile/CardBenefitSummary';
import CardClaimHistory from '../../sections/alarm-center/user-profile/CardClaimHistory';
// react
import { useNavigate, useParams } from 'react-router-dom';
import ButtonBack from '../../components/ButtonBack';
import { useEffect, useState, useContext } from 'react';
import axios from '../../utils/axios';
import { UserCurrentCorporateContext } from '../../contexts/UserCurrentCorporate';

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

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

  const { corporateValue } = useContext(UserCurrentCorporateContext);
  const { id } = useParams();

  useEffect(() => {
    axios
      .get(corporateValue + '/members/' + id)
      .then((response) => {
        setData(response.data);
      })
      .catch((error) => {
        console.error(error);
      });
  }, []);

//  console.log('data', data);

  return (
    <Page title="Profile">
      <Container maxWidth={themeStretch ? false : 'xl'}>
        <Stack direction="row" alignItems="center" sx={{ marginBottom: 2 }}>
          {/* <IconButton sx={{ marginRight: '10px', color: '#424242' }} onClick={() => navigate()}>
            <Iconify icon="heroicons-outline:arrow-narrow-left" />
          </IconButton> */}
          <ButtonBack />
          <Typography variant="h5">Profil Peserta</Typography>
        </Stack>
        <Grid container spacing={2}>
          {/* Row 1 */}
          <Grid item xs={12} md={6}>
            <Grid container spacing={2}>
              {/* Item 1 */}
              <Grid item xs={12} md={12}>
                <CardPersonalInformation data={data} />
              </Grid>
              {/* Item 2 */}
              <Grid item xs={12} md={12}>
                <CardFamilyInformation data={data} />
              </Grid>
            </Grid>
          </Grid>
          {/* Row 2 */}
          <Grid item xs={12} md={6}>
            <Grid container spacing={2}>
              {/* Item 1 */}
              <Grid item xs={12}>
                <CardPolicyNumber data={data} />
              </Grid>
              {/* Item 2 */}
              <Grid item xs={12}>
                <CardClaimHistory data={data}/>
              </Grid>
            </Grid>
          </Grid>
        </Grid>
      </Container>
    </Page>
  );
}
