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
  }

export default function OtherDetails8({handleFormSection8Data}: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} className='collapsable-form-style-multiline'>
          <FormLabel>Family history and health status:</FormLabel><br></br>
                <TextField 
                multiline
                variant="outlined"
                label="" 
                name='explanation'
                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'}}
                        onChange={(event) => {
                          setPatient((prevValues) => ({
                            ...prevValues,
                            sleep: event.target.value,
                          }));
                        }}
                        >
                        <FormControlLabel value="Back" control={<Radio />} label="Back" />
                        <FormControlLabel value="Side" control={<Radio />} label="Side" />
                        <FormControlLabel 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'}}
                        onChange={(event) => {
                          setPatient((prevValues) => ({
                            ...prevValues,
                            pillow: event.target.value,
                          }));
                        }}
                        >
                        <FormControlLabel value="Yes" control={<Radio />} label="Yes" />
                        <FormControlLabel 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'}}
                        onChange={(event) => {
                          setPatient((prevValues) => ({
                            ...prevValues,
                            orthotics: event.target.value,
                          }));
                        }}
                        >
                        <FormControlLabel value="Yes" control={<Radio />} label="Yes" />
                        <FormControlLabel value="No" control={<Radio />} label="No" />
                    </RadioGroup>
              </FormControl>
          </Grid>

          <Grid item xs={12} className='collapsable-form-style-radioButtons'>
          <FormLabel>Date of last gynecological and brest exam?</FormLabel><br></br>
                <FormControl>
                    <LocalizationProvider dateAdapter={AdapterDayjs}>
                    <DatePicker
                    value={patient.brestExam}
                    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'}}
                        onChange={(event) => {
                          setPatient((prevValues) => ({
                            ...prevValues,
                            pregnancy: event.target.value,
                          }));
                        }}
                        >
                        <FormControlLabel value="Yes" control={<Radio />} label="Yes" />
                        <FormControlLabel value="No" control={<Radio />} label="No" />
                    </RadioGroup>
              </FormControl>
          </Grid>

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

       
        </Grid>
        </>
    )
}