import Alert from '@mui/material/Alert';
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
import Dialog from '@mui/material/Dialog';
import DialogActions from '@mui/material/DialogActions';
import DialogContent from '@mui/material/DialogContent';
import DialogTitle from '@mui/material/DialogTitle';
import TextField from '@mui/material/TextField';
import Typography from '@mui/material/Typography';
import { Datetime, Number } from '@Format';
import { RootState } from './rootReducer';
import {
  Status,
  closeForm,
  setDatetime,
  setValue,
  submit
} from './measurementFormSlice';
import { Trans } from '@lingui/macro';
import { useDispatch, useSelector } from 'react-redux';
import DateTimePicker from '~/js/components/stats/Modal/Forms/DatetimePicker';
import React from 'react';
import moment, { Moment } from 'moment';
// import { setupI18n } from 'B/i18nSetup';

// setupI18n();
const TaskStatusCard = ({
  status,
  nextTime
}: {
  status: Status;
  nextTime?: string;
}) => {
  const Passive = () => (
    <Alert>
      <Box>
        <Trans>Passive</Trans>
      </Box>
    </Alert>
  );

  const Stopped = () => (
    <Alert>
      <Box>
        <Trans>Stopped</Trans>
      </Box>
    </Alert>
  );

  const Scheduled = ({ nextTime }) => (
    <Alert>
      <Box>
        <Trans>Next recording</Trans>
      </Box>
      <Box>
        <Datetime datetime={nextTime} />
      </Box>
    </Alert>
  );

  switch (status) {
    case 'passive':
      return <Passive />;
    case 'stopped':
      return <Stopped />;
    case 'scheduled':
      return <Scheduled nextTime={nextTime} />;
    default:
      return null;
  }
};

const LastRecord = ({ time, value }: { time: string; value: string }) => (
  <Box display='flex' p={2}>
    <Box mr={3}>
      <Box>
        <Typography variant='subtitle2'>
          <Trans>Last value</Trans>
        </Typography>
      </Box>
      <Box>
        <Number value={value} digits={2} />
      </Box>
    </Box>
    <Box>
      <Box>
        <Typography variant='subtitle2'>
          <Trans>Entered at</Trans>
        </Typography>
      </Box>
      <Box>
        <Datetime datetime={time} />
      </Box>
    </Box>
  </Box>
);

const Form = ({
  value,
  datetime,
  handleDateTime,
  handleValue
}: {
  value: number | string;
  datetime: Moment;
  handleDateTime: (date: Moment) => void;
  handleValue: (e) => void;
}) => (
  <Box>
    <Box>
      <DateTimePicker onChange={handleDateTime} value={datetime} />
    </Box>
    <Box mt={1}>
      <TextField
        fullWidth
        label={<Trans>Value</Trans>}
        value={value}
        onChange={handleValue}
      />
    </Box>
  </Box>
);

export default function MeasurementForm() {
  const {
    name,
    isOpen,
    value,
    datetime,
    status,
    lastRecordTime,
    lastValue,
    nextRecordTime
  } = useSelector((s: RootState) => s.measurementForm);
  const d = useDispatch();

  const handleValue = (e) => d(setValue(e.target.value));
  const handleDateTime = (t) => d(setDatetime(t));
  const handleClose = () => d(closeForm());
  const handleSubmit = () => d(submit());
  let newFormDatetime = moment(datetime);
  if (newFormDatetime.isValid() === false) {
    newFormDatetime = moment();
  }

  return (
    <Dialog fullWidth maxWidth='xs' open={isOpen}>
      <DialogTitle>{name}</DialogTitle>
      <DialogContent>
        <Box>
          <Box>
            <TaskStatusCard status={status} nextTime={nextRecordTime} />
          </Box>
          <Box>
            <LastRecord time={lastRecordTime} value={lastValue} />
          </Box>
          <Box>
            <Form
              value={value}
              datetime={newFormDatetime}
              handleDateTime={handleDateTime}
              handleValue={handleValue}
            />
          </Box>
        </Box>
      </DialogContent>
      <DialogActions>
        <Button color='secondary' onClick={handleClose}>
          <Trans>Close</Trans>
        </Button>
        <Button onClick={handleSubmit}>
          <Trans>Submit</Trans>
        </Button>
      </DialogActions>
    </Dialog>
  );
}