import * as Yup from 'yup';
import { yupResolver } from "@hookform/resolvers/yup";
import { Card, Collapse, Divider, Grid, Stack, Typography } from "@mui/material";
import { useForm } from "react-hook-form";
import { useParams } from "react-router-dom";
import HeaderBreadcrumbs from "../../../components/HeaderBreadcrumbs";
import { FormProvider, RHFCheckbox, RHFSelect, RHFTextField } from "../../../components/hook-form";
import Page from "../../../components/Page";
import useSettings from "../../../hooks/useSettings";
import CorporateTabNavigations from "../CorporateTabNavigations";
import DivisionsList from "./List";
import { useMemo, useState } from 'react';



export default function PlanCreate() {
  const { themeStretch } = useSettings();

  const { corporate_id } = useParams();

  const NewDivisionSchema = Yup.object().shape({
    name: Yup.string().required('Name is required'),
    code: Yup.string().required('Corporate Code is required'),
    active: Yup.boolean().required('Corporate Status is required'),
  });

  const defaultValues = useMemo(
    () => ({
      code: '',
    }),
    []
  );

  const methods = useForm({
    resolver: yupResolver(NewDivisionSchema),
    defaultValues,
  });

  const {
    reset,
    watch,
    control,
    setValue,
    getValues,
    setError,
    handleSubmit,
    formState: { isSubmitting },
  } = methods;

  const onSubmit = async (data: any) => {
    console.log(data);
  };

  const [open, setOpen] = useState(false);

  const benefits = [
    {
      'category' : 'General Practitioner',
      'childs' : [
        {
          'name' : 'External Doctor Online',
          'code' : 'gp-external-doctor-online'
        },
        {
          'name' : 'External Doctor Offline',
          'code' : 'gp-external-doctor-offline'
        },
        {
          'name' : 'Internal Doctor Online',
          'code' : 'gp-internal-doctor-online'
        },
        {
          'name' : 'Internal Doctor Offline',
          'code' : 'gp-internal-doctor-offline'
        },
      ]
    },
    {
      'category' : 'Specialist',
      'childs' : [
        {
          'name' : 'External Doctor Online',
          'code' : 'sp-external-doctor-online'
        },
        {
          'name' : 'External Doctor Offline',
          'code' : 'sp-external-doctor-offline'
        },
        {
          'name' : 'Internal Doctor Online',
          'code' : 'sp-internal-doctor-online'
        },
        {
          'name' : 'Internal Doctor Offline',
          'code' : 'sp-internal-doctor-offline'
        },
      ]
    },
    {
      'category' : 'Medicines',
      'childs' : [
        {
          'name' : 'Vitamins',
          'code' : 'medicines-vitamins'
        },
        {
          'name' : 'Delivery Fee',
          'code' : 'medicines-delivery-fee'
        },
      ]
    },
  ];

  const products = [
    {
      'name' : 'Inpatient',
      'code' : 'IP',
    },
    {
      'name' : 'Outpatient',
      'code' : 'OP',
    },
    {
      'name' : 'Dental',
      'code' : 'DT',
    },
    {
      'name' : 'Dental',
      'code' : 'DTL',
    },
    {
      'name' : 'Matternity',
      'code' : 'MT',
    },
    {
      'name' : 'Special Benefit',
      'code' : 'SB',
    },
  ];

  return (
    <Page title="Create Plan">

      <HeaderBreadcrumbs
        heading={'Create Plan'}
        links={[
          { name: 'Dashboard', href: '/dashboard' },
          {
            name: 'Corporates',
            href: '/corporates',
          },
          {
            name: 'Corporate Name',
            href: '/corporates/'+corporate_id,
          },
          {
            name: 'Plans',
            href: '/corporates/'+corporate_id+'/plans',
          },
          {
            name: 'Create',
            href: '/corporates/'+corporate_id+'/plans/create',
          },
        ]}
      />
      

      <Grid container spacing={2}>
        <Grid item xs={12}>
          <Card sx={{ p: 2 }}>
            <FormProvider methods={methods} onSubmit={handleSubmit(onSubmit)}>
              <Stack spacing={3}>

                <Typography variant="h6">Plan Detail</Typography>

                <RHFTextField name="name" label="Name" />

                <RHFTextField name="code" label="Code" />

                <RHFTextField name="limit" label="Limit" />

                <RHFTextField name="start" label="Start (YYYY-MM-DD)" />

                <RHFTextField name="end" label="End (YYYY-MM-DD)" />

                <Typography variant="h6">Benefit Configuration</Typography>
                
                <Divider orientation="horizontal" flexItem />
                <Stack spacing={3} divider={<Divider orientation="horizontal" flexItem />}>
                  <Stack spacing={2}>
                    <RHFCheckbox name="a" label='Outpatient'/>
                    {benefits.map(row => (
                      <Collapse in={true} timeout="auto" unmountOnExit >
                        <Typography>{row.category}</Typography>
                        <Grid container>
                        {row.childs.map(benefit => (
                          <Grid item xs={6}>
                            <RHFCheckbox name={benefit.code} label={benefit.name}/>
                            </Grid>
                        ))}
                        </Grid>
                      </Collapse>
                    ))}
                    <Typography>Admin Fee</Typography>
                    <Grid container>
                    {benefits.map(row => (
                      <Grid item xs={4}>
                        <RHFCheckbox name="cat" label={row.category}/>
                      </Grid>
                    ))}
                    </Grid>
                  </Stack>


                  <Stack spacing={2}>
                    <RHFCheckbox name="a" label='Inpatient'/>
                    {benefits.map(row => (
                      <Collapse in={true} timeout="auto" unmountOnExit >
                        <Typography>{row.category}</Typography>
                        <Grid container>
                        {row.childs.map(benefit => (
                          <Grid item xs={6}>
                            <RHFCheckbox name={benefit.code} label={benefit.name}/>
                            </Grid>
                        ))}
                        </Grid>
                      </Collapse>
                    ))}
                    <Typography>Admin Fee</Typography>
                    <Grid container>
                    {benefits.map(row => (
                      <Grid item xs={4}>
                        <RHFCheckbox name="cat" label={row.category}/>
                      </Grid>
                    ))}
                    </Grid>
                  </Stack>
                </Stack>

              </Stack>
            </FormProvider>
          </Card>
        </Grid>
      </Grid>
    </Page>
  );
}
