/* ---------------------------------- @mui ---------------------------------- */
import {
  Paper,
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableHead,
  TableRow,
  TextField,
  Stack,
  Button,
  TableSortLabel,
  Typography,
  Grid,
  Box,
  Card,
  MenuItem,
} from '@mui/material';
import { visuallyHidden } from '@mui/utils';
/* ---------------------------------- axios --------------------------------- */
// import axios from 'axios';
import axios from '../../utils/axios';
/* ---------------------------------- react --------------------------------- */
import { useContext, useEffect, useState } from 'react';

/* -------------------------------- component ------------------------------- */
import Iconify from '../../components/Iconify';
import BaseTablePagination from '../../components/BaseTablePagination';
import TableComponent from '../../components/Table';
import Page from '../../components/Page';

/* ---------------------------------- hooks --------------------------------- */
import useMap from '../../hooks/useMap';
/* ---------------------------------- theme --------------------------------- */
import palette from '../../theme/palette';
import { UserCurrentCorporateContext } from '../../contexts/UserCurrentCorporate';
import { HeadCell, Order, PaginationTableProps } from '../../@types/table';
import { useSearchParams, useNavigate, Link } from 'react-router-dom';
import TableMoreMenu from '../../components/table/TableMoreMenu';
import EditOutlinedIcon from '@mui/icons-material/EditOutlined';
import VisibilityOutlinedIcon from '@mui/icons-material/VisibilityOutlined';

/*------------------------------------ icon ----------------------------------- */
import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos';
import UploadImage from '../../components/UploadImage';
import { Corporate } from '../../@types/corporates';
import { fDateSuffix } from '../../utils/formatTime';
import { fSplit } from '../../utils/formatNumber';


/* ---------------------------------- types --------------------------------- */

// type PaginationTableProps = {
//   current_page: number;
//   from: number;
//   last_page: number;
//   links: [];
//   path: string;
//   per_page: number;
//   to: number;
//   total: number;
// };

// type DataTableProps = {
//   fullName: string;
//   memberId: string;
//   service: string;
//   start_date: string;
//   end_date: string;
//   status: boolean | number;
// };



// /* -------------------------------------------------------------------------- */

// /* -------------------------- enchanced table head -------------------------- */

// type Order = 'asc' | 'desc';

// interface HeadCell {
//   id: string;
//   label: string;
// }

// const headCells: readonly HeadCell[] = [
//   {
//     id: 'name',
//     label: 'Name',
//   },
//   {
//     id: 'member_id',
//     label: 'Member ID',
//   },
//   {
//     id: 'service',
//     label: 'Service',
//   },
//   {
//     id: 'start_date',
//     label: 'Start Date',
//   },
//   {
//     id: 'end_date',
//     label: 'End Date',
//   },
//   {
//     id: 'status',
//     label: 'Status',
//   },
// ];

// interface EnhancedTableProps {
//   onRequestSort: (event: React.MouseEvent<unknown>, property: string) => void;
//   order: Order;
//   orderBy: string;
// }

// function EnhancedTableHead(props: EnhancedTableProps) {
//   const { order, orderBy, onRequestSort } = props;
//   const createSortHandler = (property: string) => (event: React.MouseEvent<unknown>) => {
//     onRequestSort(event, property);
//   };

//   return (
//     <TableHead>
//       <TableRow>
//         <TableCell align="center">No</TableCell>
//         {headCells.map((headCell) => (
//           <TableCell
//             key={headCell.id}
//             sortDirection={orderBy === headCell.id ? order : false}
//             align="center"
//           >
//             <TableSortLabel
//               active={orderBy === headCell.id}
//               direction={orderBy === headCell.id ? order : 'asc'}
//               onClick={createSortHandler(headCell.id)}
//             >
//               {headCell.label}
//               {orderBy === headCell.id ? (
//                 <Box component="span" sx={visuallyHidden}>
//                   {order === 'desc' ? 'sorted descending' : 'sorted ascending'}
//                 </Box>
//               ) : null}
//             </TableSortLabel>
//           </TableCell>
//         ))}
//       </TableRow>
//     </TableHead>
//   );
// }

/* -------------------------------------------------------------------------- */

export default function List() {
  const navigate = useNavigate();

  const { corporateValue } = useContext(UserCurrentCorporateContext);
  const [currentCorporate, setCurrentCorporate] = useState<Corporate | null>(null);


  /* -------------------------------------------------------------------------- */
  /*                          setting up for the table                          */
  /* -------------------------------------------------------------------------- */
  const [isLoading, setIsLoading] = useState(true);

  const loadings = {
    isLoading: isLoading,
    setIsLoading: setIsLoading,
  };

  // useEffect(() => {
  //   (async () => {
  //     setIsLoading(true);

  //     await new Promise((resolve) => setTimeout(resolve, 250));

  //     const parameters =
  //       Object.keys(appliedParams).length !== 0
  //         ? appliedParams
  //         : Object.fromEntries([...searchParams.entries(), ['order', order], ['orderBy', orderBy]]);

  //     const response = await axios.get(`${corporateValue}/corporate`, {
  //       params: { ...parameters },
  //     });
  //     setCurrentCorporate(response.data[0]);
  //     setPaginationTable(response.data);
  //     setRowsPerPage(response.data.per_page);

      

  //     if (searchParams.get('page')) {
  //       //@ts-ignore
  //       const currentPage = parseInt(searchParams.get('page')) - 1;

  //       paginationTable.current_page = currentPage;
  //       setPage(currentPage);
  //     }

  //     setIsLoading(false);
  //   })();
  // }, [appliedParams, searchParams, order, orderBy, setSearchParams, corporateValue]);
  useEffect(() => {
    axios.get(`${corporateValue}/corporate`)
      .then((response) => {
        const data = response.data.data[0];
        setCurrentCorporate(data);
      })
      .catch((error) => {
        console.error('Error fetching corporate data:', error);
        // Handle error here
      });
  }, [corporateValue]);
  
  return (
    <Stack>
      <Grid container>
        {/* Field 1 */}
        <Grid item xs={12} paddingX="24px" paddingY="20px">
          <Stack direction="row" alignItems="center">
            <ArrowBackIosIcon onClick={() => navigate(`/corporate`)} sx={{ cursor: "pointer"  }} />
            <Typography variant="h5">Profile Corporate </Typography>
          </Stack>
        </Grid>
      </Grid>
      <Card>
        <Grid container>
          {/* Field 1 */}
          <Grid item xs={12} paddingX="24px" paddingY="20px">
            <Stack direction="row" alignItems="center">
              <Typography variant="h6" color='#19BBBB'>Corporate Profile </Typography>
            </Stack>
            <Stack direction="row" alignItems="center">
              <Grid container alignItems="flex-start" sx={{ marginTop: '50px' }}>
                <Grid item xs={12} md={3}>
                  <div style={{ position: 'relative', flex: 'center', height: 'fit-content' }}>
                      <img
                        width={160}
                        height={160}
                        src={currentCorporate?.avatar_url}
                        alt="user-profile"
                        style={{ borderRadius: '50%' }}
                      />
                  </div>
                </Grid>
                <Grid item xs={12} md={8}>
                  <Grid container gap={2}>
                    <Grid item xs={12} md={3} >
                        <Typography variant="h6" color={'#637381'} >Corporate Type</Typography>
                    </Grid>
                    <Grid item xs={12} md={8} >
                        <Typography variant="h6">{currentCorporate?.type}</Typography>
                    </Grid>
                    <Grid item xs={12} md={3} >
                        <Typography variant="h6" color={'#637381'} >Corporate Name</Typography>
                    </Grid>
                    <Grid item xs={12} md={8} >
                        <Typography variant="h6">{currentCorporate?.name}</Typography>
                    </Grid>
                    <Grid item xs={12} md={3} >
                        <Typography variant="h6" color={'#637381'} >Corporate Code</Typography>
                    </Grid>
                    <Grid item xs={12} md={8} >
                        <Typography variant="h6">{currentCorporate?.code}</Typography>
                    </Grid>
                    <Grid item xs={12} md={3} >
                        <Typography variant="h6" color={'#637381'} >Payor ID</Typography>
                    </Grid>
                    <Grid item xs={12} md={8} >
                        <Typography variant="h6">{currentCorporate?.payor_id}</Typography>
                    </Grid>
                    <Grid item xs={12} md={3} >
                        <Typography variant="h6" color={'#637381'} >Welcome Messages</Typography>
                    </Grid>
                    <Grid item xs={12} md={8} >
                        <Typography variant="h6">{currentCorporate?.welcome_message ? currentCorporate?.welcome_message.replace(/<[^>]*>/g, '') : '-'}</Typography>
                    </Grid>
                    <Grid item xs={12} md={3} >
                        <Typography variant="h6" color={'#637381'} >Help Text</Typography>
                    </Grid>
                    <Grid item xs={12} md={8} >
                        <Typography variant="h6">{currentCorporate?.help_text ? currentCorporate?.help_text.replace(/<[^>]*>/g, '') : '-'}</Typography>
                    </Grid>
                    <Grid item xs={12} md={3} >
                        <Typography variant="h6" color={'#637381'} >Linking Rules</Typography>
                    </Grid>
                    <Grid item xs={12} md={8} >
                        <Typography variant="h6" sx={{marginLeft: '20px'}}>
                          <ul>
                            {currentCorporate?.linking_rules ? (
                              currentCorporate.linking_rules
                                .filter(rule => rule)
                                .map((rule, index) => (
                                  <li key={index}>{rule}</li>
                                ))
                            ) : (
                              <li>-</li>
                            )}
                          </ul>
                        </Typography>
                    </Grid>
                  </Grid>
                </Grid>
              </Grid>
            </Stack>
          </Grid>
        </Grid>
      </Card>

      {/* <Card sx={{marginTop:'30px'}}>
        <Grid container>
          <Grid item xs={12} paddingX="24px" paddingY="20px">
            <Stack direction="row" alignItems="center">
              <Typography variant="h6" color='#19BBBB'>Policy Detail </Typography>
            </Stack>
            <Stack direction="row" alignItems="center">
              <Grid container alignItems="flex-start" sx={{ marginTop: '50px' }}>
                <Grid container gap={2}>
                  <Grid item xs={12} md={3} >
                      <Typography variant="h6" color={'#637381'} >Corporate Type</Typography>
                  </Grid>
                  <Grid item xs={12} md={8} >
                      <Typography variant="h6">{currentCorporate?.type}</Typography>
                  </Grid>
                  <Grid item xs={12} md={3} >
                      <Typography variant="h6" color={'#637381'} >Corporate Name</Typography>
                  </Grid>
                  <Grid item xs={12} md={8} >
                      <Typography variant="h6">{currentCorporate?.name}</Typography>
                  </Grid>
                  <Grid item xs={12} md={3} >
                      <Typography variant="h6" color={'#637381'} >Corporate Code</Typography>
                  </Grid>
                  <Grid item xs={12} md={8} >
                      <Typography variant="h6">{currentCorporate?.code}</Typography>
                  </Grid>
                  <Grid item xs={12} md={3} >
                      <Typography variant="h6" color={'#637381'} >Payor ID</Typography>
                  </Grid>
                  <Grid item xs={12} md={8} >
                      <Typography variant="h6">{currentCorporate?.payor_id}</Typography>
                  </Grid>
                  <Grid item xs={12} md={3} >
                      <Typography variant="h6" color={'#637381'} >Welcome Messages</Typography>
                  </Grid>
                  <Grid item xs={12} md={8} >
                      <Typography variant="h6">{currentCorporate?.welcome_message.replace(/<[^>]*>/g, '')}</Typography>
                  </Grid>
                  <Grid item xs={12} md={3} >
                      <Typography variant="h6" color={'#637381'} >Help Text</Typography>
                  </Grid>
                  <Grid item xs={12} md={8} >
                      <Typography variant="h6">{currentCorporate?.help_text.replace(/<[^>]*>/g, '')}</Typography>
                  </Grid>
                  <Grid item xs={12} md={3} >
                      <Typography variant="h6" color={'#637381'} >Linking Rules</Typography>
                  </Grid>
                  <Grid item xs={12} md={8} >
                      <Typography variant="h6" sx={{marginLeft: '20px'}}>
                        <ul>
                          {currentCorporate?.linking_rules
                            .filter(rule => rule) // Menghapus elemen yang kosong atau null
                            .map((rule, index) => (
                              <li key={index}>{rule}</li>
                            ))}
                        </ul>
                      </Typography>
                  </Grid>
                </Grid>
              </Grid>
            </Stack>
          </Grid>
        </Grid>
      </Card> */}

      <Card sx={{marginTop:'30px'}}>
        <Grid container>
          <Grid item xs={12} paddingX="24px" paddingY="20px">
            <Stack direction="row" alignItems="center">
              <Typography variant="h6" color='#19BBBB'>Policy Detail </Typography>
            </Stack>
            <Stack direction="row" alignItems="center">
              <Grid container alignItems="flex-start" sx={{ marginTop: '50px' }}>
                <Grid container gap={2}>
                  <Grid item xs={12} md={3} >
                      <Typography variant="h6" color={'#637381'} >Policy Number</Typography>
                  </Grid>
                  <Grid item xs={12} md={8} >
                      <Typography variant="h6">{currentCorporate?.current_policy?.code}</Typography>
                  </Grid>
                  <Grid item xs={12} md={3} >
                      <Typography variant="h6" color={'#637381'} >Cooperation Start Date</Typography>
                  </Grid>
                  <Grid item xs={12} md={8} >
                      <Typography variant="h6">{currentCorporate?.current_policy?.start && fDateSuffix(currentCorporate?.current_policy?.start)}</Typography>
                  </Grid>
                  <Grid item xs={12} md={3} >
                      <Typography variant="h6" color={'#637381'} >Cooperation End Date</Typography>
                  </Grid>
                  <Grid item xs={12} md={8} >
                      <Typography variant="h6">{currentCorporate?.current_policy?.end && fDateSuffix(currentCorporate?.current_policy?.end)}</Typography>
                  </Grid>
                  <Grid item xs={12} md={3} >
                      <Typography variant="h6" color={'#637381'} >Deposit Initial Fund</Typography>
                  </Grid>
                  <Grid item xs={12} md={12} >
                      
                  </Grid>
                </Grid>

                <Grid container gap={2}>
                  <Grid item xs={12} md={12} >
                      
                  </Grid>
                  <Grid item xs={12} md={12} >
                      <Typography variant="h6">Minimal Depost Policy Level</Typography>
                  </Grid>
                  <Grid item xs={3} md={3} >
                      <Typography variant="h6" color={'#637381'} >Percentage (%)</Typography>
                  </Grid>
                  <Grid item xs={3} md={2} >
                      <Typography variant="h6">{currentCorporate?.current_policy?.minimal_deposit_percentage}</Typography>
                  </Grid>
                  <Grid item xs={2} md={2} >
                      <Typography variant="h6" color={'#637381'} >Net</Typography>
                  </Grid>
                  <Grid item xs={3} md={3} >
                      <Typography variant="h6" color={'#637381'} >(Rp. {currentCorporate?.current_policy?.minimal_deposit_net && fSplit(currentCorporate?.current_policy?.minimal_deposit_net)})</Typography>
                  </Grid>
                  
                  <Grid item xs={12} md={12} >
                      <Typography variant="h6">Minimal Alert Level</Typography>
                  </Grid>
                  <Grid item xs={3} md={3} >
                      <Typography variant="h6" color={'#637381'} >Percentage (%)</Typography>
                  </Grid>
                  <Grid item xs={3} md={2} >
                      <Typography variant="h6">{currentCorporate?.current_policy?.minimal_alert_percentage}</Typography>
                  </Grid>
                  <Grid item xs={2} md={2} >
                      <Typography variant="h6" color={'#637381'} >Net</Typography>
                  </Grid>
                  <Grid item xs={3} md={2} >
                      <Typography variant="h6" color={'#637381'} >(Rp. {currentCorporate?.current_policy?.minimal_alert_net && fSplit(currentCorporate?.current_policy?.minimal_alert_net)})</Typography>
                  </Grid>
                  
                  <Grid item xs={12} md={12} >
                      <Typography variant="h6">Minimal Stop Service Level</Typography>
                  </Grid>
                  <Grid item xs={3} md={3} >
                      <Typography variant="h6" color={'#637381'} >Percentage (%)</Typography>
                  </Grid>
                  <Grid item xs={3} md={2} >
                      <Typography variant="h6">{currentCorporate?.current_policy?.minimal_stop_service_percentage}</Typography>
                  </Grid>
                  <Grid item xs={2} md={2} >
                      <Typography variant="h6" color={'#637381'} >Net</Typography>
                  </Grid>
                  <Grid item xs={3} md={2} >
                      <Typography variant="h6" color={'#637381'} >(Rp. {currentCorporate?.current_policy?.minimal_stop_service_net && fSplit(currentCorporate?.current_policy?.minimal_stop_service_net)})</Typography>
                  </Grid>
                  
                </Grid>
              </Grid>
            </Stack>
          </Grid>
        </Grid>
      </Card>
    </Stack>
  );
}
