import {
  Grid,
  FormLabel,
  TextField,
  FormControl,
  RadioGroup,
  FormControlLabel,
  Radio,
} from '@mui/material';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import React, { useEffect } from 'react';
import { LocalizationProvider, DatePicker } from '@mui/x-date-pickers';
import dayjs from 'dayjs';

interface Patient {
  familyHistory: string;
  sleep: string;
  pillow: string;
  orthotics: string;
  brestExam: any;
  pregnancy: string;
  menstralCycle: any;
}

type Props = {
  handleFormSection8Data: (
    familyHistory: string | undefined,
    sleep: string | undefined,
    pillow: string | undefined,
    orthotics: string | undefined,
    brestExam: any,
    pregnancy: string | undefined,
    menstralCycle: any
  ) => void;
  patientDataDiplay: any;
  type: string;
};

export default function OtherDetails8({
  handleFormSection8Data,
  patientDataDiplay,
  type,
}: Props) {
  const [patient, setPatient] = React.useState<Patient>({
    familyHistory: '',
    sleep: '',
    pillow: '',
    orthotics: '',
    brestExam: dayjs('2022-04-17'),
    pregnancy: '',
    menstralCycle: dayjs('2022-04-17'),
  });

  useEffect(() => {
    handleFormSection8Data(
      patient.familyHistory,
      patient.sleep,
      patient.pillow,
      patient.orthotics,
      (patient.brestExam = dayjs(patient.brestExam)),
      patient.pregnancy,
      (patient.menstralCycle = dayjs(patient.menstralCycle))
    );
  }, [patient]);

  const formatDate = (inputDate: any) => {
    const date = new Date(inputDate);
    const year = date.getUTCFullYear();
    const month = String(date.getUTCMonth() + 1).padStart(2, '0');
    const day = String(date.getUTCDate() + 1).padStart(2, '0');

    return `${year}-${month}-${day}`;
  };

  return (
    <>
      <Grid container direction='row'>
        <Grid
          item
          xs={12}
          xl={3}
          lg={4}
          md={6}
          sm={12}
          className='collapsable-form-style-multiline'
        >
          <FormLabel>Family history and health status:</FormLabel>
          <br></br>
          <TextField
            multiline
            variant='outlined'
            label=''
            value={
              type == 'display'
                ? patientDataDiplay.familyHistory
                : patient.familyHistory
            }
            disabled={type == 'display'}
            onChange={(event: any) => {
              setPatient((prevValues) => ({
                ...prevValues,
                familyHistory: event.target.value,
              }));
            }}
          />
        </Grid>

        <Grid item xs={12} className='collapsable-form-style-radioButtons'>
          <FormControl>
            <FormLabel>How do you sleep?</FormLabel>
            <RadioGroup
              sx={{ display: 'flex', flexDirection: 'row' }}
              defaultValue={
                type == 'display' ? patientDataDiplay.sleep : patient.sleep
              }
              onChange={(event) => {
                setPatient((prevValues) => ({
                  ...prevValues,
                  sleep: event.target.value,
                }));
              }}
            >
              <FormControlLabel
                disabled={type == 'display'}
                value='Back'
                control={<Radio />}
                label='Back'
              />
              <FormControlLabel
                disabled={type == 'display'}
                value='Side'
                control={<Radio />}
                label='Side'
              />
              <FormControlLabel
                disabled={type == 'display'}
                value='Stomach'
                control={<Radio />}
                label='Stomach'
              />
            </RadioGroup>
          </FormControl>
        </Grid>

        <Grid item xs={12} className='collapsable-form-style-radioButtons'>
          <FormControl>
            <FormLabel>Do you use a pillow?</FormLabel>
            <RadioGroup
              sx={{ display: 'flex', flexDirection: 'row' }}
              defaultValue={
                type == 'display' ? patientDataDiplay.pillow : patient.pillow
              }
              onChange={(event) => {
                setPatient((prevValues) => ({
                  ...prevValues,
                  pillow: event.target.value,
                }));
              }}
            >
              <FormControlLabel
                disabled={type == 'display'}
                value='Yes'
                control={<Radio />}
                label='Yes'
              />
              <FormControlLabel
                disabled={type == 'display'}
                value='No'
                control={<Radio />}
                label='No'
              />
            </RadioGroup>
          </FormControl>
        </Grid>

        <Grid item xs={12} className='collapsable-form-style-radioButtons'>
          <FormControl>
            <FormLabel>Do you wear orthotics or arch support?</FormLabel>
            <RadioGroup
              sx={{ display: 'flex', flexDirection: 'row' }}
              defaultValue={
                type == 'display'
                  ? patientDataDiplay.orthotics
                  : patient.orthotics
              }
              onChange={(event) => {
                setPatient((prevValues) => ({
                  ...prevValues,
                  orthotics: event.target.value,
                }));
              }}
            >
              <FormControlLabel
                disabled={type == 'display'}
                value='Yes'
                control={<Radio />}
                label='Yes'
              />
              <FormControlLabel
                disabled={type == 'display'}
                value='No'
                control={<Radio />}
                label='No'
              />
            </RadioGroup>
          </FormControl>
        </Grid>

        <Grid
          item
          xs={12}
          xl={3}
          lg={4}
          md={6}
          sm={12}
          className='collapsable-form-style-radioButtons'
        >
          <FormLabel>Date of last gynecological and brest exam?</FormLabel>
          <br></br>
          <FormControl>
            <LocalizationProvider dateAdapter={AdapterDayjs}>
              <DatePicker
                value={
                  type == 'display'
                    ? patientDataDiplay.brestExam
                    : patient.brestExam
                }
                disabled={type == 'display'}
                onChange={(event) => {
                  const formattedDate = formatDate(event);
                  setPatient((prevValues) => ({
                    ...prevValues,
                    brestExam: formattedDate,
                  }));
                }}
                renderInput={(params) => (
                  <TextField variant='outlined' {...params} />
                )}
              />
            </LocalizationProvider>
          </FormControl>
        </Grid>

        {/* <Grid item xs={6} className='collapsable-form-style' sx={{marginTop:4, marginBottom:2}}> 
                <FormLabel sx={{fontWeight:600}}>For X-Ray purposes:</FormLabel>
          </Grid> */}

        <Grid item xs={12} className='collapsable-form-style-radioButtons'>
          <FormControl>
            <FormLabel>Possible pregnancy?</FormLabel>
            <RadioGroup
              sx={{ display: 'flex', flexDirection: 'row' }}
              defaultValue={
                type == 'display'
                  ? patientDataDiplay.pregnancy
                  : patient.pregnancy
              }
              onChange={(event) => {
                setPatient((prevValues) => ({
                  ...prevValues,
                  pregnancy: event.target.value,
                }));
              }}
            >
              <FormControlLabel
                disabled={type == 'display'}
                value='Yes'
                control={<Radio />}
                label='Yes'
              />
              <FormControlLabel
                disabled={type == 'display'}
                value='No'
                control={<Radio />}
                label='No'
              />
            </RadioGroup>
          </FormControl>
        </Grid>

        <Grid
          item
          xs={12}
          xl={3}
          lg={4}
          md={6}
          sm={12}
          className='collapsable-form-style-radioButtons'
        >
          <FormLabel>Date of last menstrual cycle?</FormLabel>
          <br></br>
          <FormControl>
            <LocalizationProvider dateAdapter={AdapterDayjs}>
              <DatePicker
                value={
                  type == 'display'
                    ? patientDataDiplay.menstralCycle
                    : patient.menstralCycle
                }
                disabled={type == 'display'}
                onChange={(event) => {
                  const formattedDate = formatDate(event);
                  setPatient((prevValues) => ({
                    ...prevValues,
                    menstralCycle: formattedDate,
                  }));
                }}
                renderInput={(params) => (
                  <TextField variant='outlined' {...params} />
                )}
              />
            </LocalizationProvider>
          </FormControl>
        </Grid>
      </Grid>
    </>
  );
}