import { SubmissionPeriod } from '../../../model/submissionPeriod';
import React from 'react';
import {
  Button,
  IconButton,
  Stack,
  TextField
} from '@mui/material';
import ClearIcon from '@mui/icons-material/Clear';
import moment from 'moment';
import { AssignmentSettings } from '../../../model/assignmentSettings';

const duration_from_values = (days: number, hours: number): string => {
  return `P${days}DT${hours}H`;
};

export interface ILateSubmissionInfo {
  days: number;
  hours: number;
  scaling: number;
}

const values_from_duration = (
  period: string,
  scaling: number
): ILateSubmissionInfo => {
  const d = moment.duration(period);
  return { days: d.days(), hours: d.hours(), scaling: scaling || 0.0 };
};

export const getLateSubmissionInfo = (
  lateSubmissions: SubmissionPeriod[]
): ILateSubmissionInfo[] => {
  lateSubmissions = lateSubmissions || [];
  return lateSubmissions.map(l => values_from_duration(l.period, l.scaling));
};

interface ILateSubmissionFormProps {
  formik: any;
}

export const LateSubmissionForm = (props: ILateSubmissionFormProps) => {
  const formik = props.formik;

  const updateSettings = (settings: AssignmentSettings) => {
    formik.setFieldValue('settings', settings);
  };

  const updateLateSubmissionValue = (
    i: number,
    key: keyof ILateSubmissionInfo,
    value: number
  ) => {
    const period = formik.values.settings.late_submission[i];
    const late_sub_info = values_from_duration(period.period, period.scaling);
    late_sub_info[key] = value;
    formik.values.settings.late_submission[i] = {
      period: duration_from_values(late_sub_info.days, late_sub_info.hours),
      scaling: late_sub_info.scaling
    };
    updateSettings(formik.values.settings);
  };

  const addLateSubmission = () => {
    let scaling = 0.5;
    let days = 1;
    let hours = 0;
    const numPeriods = formik.values?.settings?.late_submission?.length;
    if (numPeriods > 0) {
      const prevPeriod =
        formik.values?.settings?.late_submission[numPeriods - 1];
      const prevInfo = values_from_duration(
        prevPeriod.period,
        prevPeriod.scaling
      );
      scaling = prevInfo.scaling / 2;
      days = prevInfo.days + 1;
      hours = prevInfo.hours;
    }
    formik.values.settings.late_submission.push({
      period: duration_from_values(days, hours),
      scaling: scaling
    });
    updateSettings(formik.values.settings);
  };

  const removeLateSubmission = (i: number) => {
    formik.values.settings.late_submission.splice(i, 1);
    updateSettings(formik.values.settings);
  };

  return (
    <>
      {formik.values.settings.late_submission.map(
        (l: SubmissionPeriod, i: number) => {
          const late_sub_info = values_from_duration(l.period, l.scaling);
          return (
            <Stack direction={'row'} spacing={2}>
              <TextField
                id={`days_${i}`}
                label={'Days'}
                value={late_sub_info.days}
                type={'number'}
                inputProps={{ pattern: '^\\d*$' }}
                error={i in (formik.errors?.late_submission?.days || {})}
                helperText={
                  i in (formik.errors?.late_submission?.days || {}) &&
                  formik.errors.late_submission?.days[i]
                }
                onChange={e =>
                  updateLateSubmissionValue(i, 'days', +e.target.value)
                }
              />
              <TextField
                id={`hours${i}`}
                label={'Hours'}
                value={late_sub_info.hours}
                type={'number'}
                inputProps={{ pattern: '^\\d*$' }}
                error={i in (formik.errors?.late_submission?.hours || {})}
                helperText={
                  i in (formik.errors?.late_submission?.hours || {}) &&
                  formik.errors.late_submission?.hours[i]
                }
                onChange={e =>
                  updateLateSubmissionValue(i, 'hours', +e.target.value)
                }
              />
              <TextField
                id={`scaling${i}`}
                label={'Scaling'}
                value={late_sub_info.scaling}
                type={'number'}
                inputProps={{
                  maxLength: 5,
                  step: '0.001',
                  min: 0.0,
                  max: 1.0,
                  pattern: '^\\d*\\.\\d{0,3}?$'
                }}
                error={i in (formik.errors?.late_submission?.scaling || {})}
                helperText={
                  i in (formik.errors?.late_submission?.scaling || {}) &&
                  formik.errors.late_submission?.scaling[i]
                }
                onChange={e =>
                  updateLateSubmissionValue(i, 'scaling', +e.target.value)
                }
              />
              <IconButton onClick={() => removeLateSubmission(i)}>
                <ClearIcon />
              </IconButton>
            </Stack>
          );
        }
      )}
      <Button variant={'outlined'} onClick={() => addLateSubmission()}>
        Add Late Submission Period
      </Button>
    </>
  );
};
