// @mui
import { Box, Button, Card, Collapse, Container, FormControl, Grid, IconButton, InputLabel, MenuItem, OutlinedInput, Paper, Select, SelectChangeEvent, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, TextField, Typography, Badge, Stack } from '@mui/material';
import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
import PublishIcon from '@mui/icons-material/Publish';
import AddIcon from '@mui/icons-material/Add';
// hooks
import useSettings from '../../hooks/useSettings';
// components
import Page from '../../components/Page';
import axios from '../../utils/axios';
import useAuth from '../../hooks/useAuth';
import { Link , NavLink as RouterLink, useParams } from 'react-router-dom';
import React, { useContext, useEffect, useRef, useState } from 'react';
import { Theme, useTheme } from '@mui/material/styles';
import { Corporate } from '../../@types/corporates';
import { LaravelPaginatedData, LaravelPaginatedDataDefault } from '../../@types/paginated-data';
import HeaderBreadcrumbs from '../../components/HeaderBreadcrumbs';
import CorporateTabNavigations from './CorporateTabNavigations';
import { fCurrency } from '../../utils/formatNumber';
import { ConfiguredCorporateContext } from '@/contexts/ConfiguredCorporateContext';

export default function Corporates() {
  const { themeStretch } = useSettings();
  const { corporate_id } = useParams();
  const [corporate, setCorporate] = useState<Corporate|null>();

  const configuredCorporateContext = useContext(ConfiguredCorporateContext);

  useEffect(() => {
    setCorporate(configuredCorporateContext.currentCorporate);
  }, [configuredCorporateContext])

  const headStyle = {
    fontWeight: 'bold',
  };  
  return (
    <Page title="Dashboard">

      <HeaderBreadcrumbs
        heading={'Corporate Dashboard'}
        links={[
          {
            name: 'Corporates',
            href: '/corporates',
          },
          {
            name: corporate?.name ?? '-',
            href: '/corporates/'+corporate_id,
          },
        ]}
      />
      
      {/* <Container maxWidth={themeStretch ? false : 'xl'}> */}
        <Card>
          <Stack spacing="3">
            <CorporateTabNavigations position=""/>
            <Grid container spacing={3}>

              <Grid item md={6} sx={{ p:2 }}>
                <Typography sx={{...headStyle, px:3, fontSize:'24px'}}>Current Policy </Typography>
                
                <Table>
                  <TableBody>

                    <TableRow>
                      <TableCell sx={headStyle}>Policy Name</TableCell>
                      <TableCell>{corporate?.current_policy?.code}</TableCell>
                    </TableRow>

                    <TableRow>
                      <TableCell sx={headStyle}>Total Premi</TableCell>
                      <TableCell>{fCurrency(corporate?.current_policy?.total_premi)}</TableCell>
                    </TableRow>

                    <TableRow>
                      <TableCell sx={headStyle}>Stop Service</TableCell>
                      <TableCell>{fCurrency(corporate?.current_policy?.minimal_stop_service_net)}</TableCell>
                    </TableRow>

                    <TableRow>
                      <TableCell sx={headStyle}>Balance</TableCell>
                      <TableCell>{fCurrency(corporate?.current_policy?.limit_balance)}</TableCell>
                    </TableRow>

                  </TableBody>
                </Table>

              </Grid>

              <Grid item md={6} sx={{ p:2 }}>
                <Typography sx={{...headStyle, px:3, fontSize:'24px'}}>Claims</Typography>
                
                <Table>
                  <TableBody>

                    <TableRow>
                      <TableCell sx={headStyle}>Number Of Claim</TableCell>
                      <TableCell>{corporate?.current_policy?.code}</TableCell>
                    </TableRow>

                    <TableRow>
                      <TableCell sx={headStyle}>Total Usage This Year</TableCell>
                      <TableCell>{fCurrency((corporate?.current_policy?.total_premi ?? 0) - (corporate?.current_policy?.limit_balance ?? 0))}</TableCell>
                    </TableRow>

                  </TableBody>
                </Table>

              </Grid>

            </Grid>
          </Stack>
        </Card>
      {/* </Container> */}
    </Page>
  );
}
