import React from 'react';

import { Box, Checkbox, FormControlLabel, TextField, Typography } from '@mui/material';
import { makeStyles } from 'tss-react/mui';

import type { SectionClasses } from '../HostManagement';
import type { DeletedHostsCleanup, InactivityCleanup } from '../store/managementSlice';

const useStyles = makeStyles()(theme => ({
  row: {
    alignItems: 'center',
    marginBottom: theme.spacing(1),
  },
  daysInput: {
    minWidth: 64,
    '& .MuiInputBase-root': {
      width: 64,
      '& input': {
        marginBottom: 0
      },
    },
  },
  helpText: {
    marginLeft: theme.spacing(4),
    fontSize: 16,
    fontWeight: 400,
    marginBottom: theme.spacing(2),
  },
}));

type Props = {
  inactivity: InactivityCleanup;
  deletedHosts: DeletedHostsCleanup;
  onInactivityChange: (value: InactivityCleanup) => void;
  onDeletedHostsChange: (value: DeletedHostsCleanup) => void;
  classes: SectionClasses;
};

const stopPropagation = (e: React.MouseEvent) => e.stopPropagation();

export const TimeBasedCleanupSection = ({ inactivity, deletedHosts, onInactivityChange, onDeletedHostsChange, classes }: Props) => {
  const { classes: ownClasses, cx } = useStyles();
  return (
    <Box>
      <Typography component="h3" variant="h6" sx={{ fontWeight: 500, fontSize: 16, mb: 2 }}>
        Time-based cleanup
      </Typography>
      <Box sx={{ display: 'flex', flexDirection: 'column' }}>
        <FormControlLabel
          className={ownClasses.row}
          control={
            <Checkbox
              checked={inactivity.enabled}
              color="primary"
              onChange={e => onInactivityChange({ ...inactivity, enabled: e.target.checked })}
            />
          }
          label={
            <Box className={classes.labelRow}>
              <span>Automatically delete non-reporting hosts after</span>
              <TextField
                className={ownClasses.daysInput}
                type="number"
                value={inactivity.days}
                onClick={stopPropagation}
                onChange={e => onInactivityChange({ ...inactivity, days: Number(e.target.value) || 1 })}
              />
              <span>days of inactivity.</span>
            </Box>
          }
        />
        <FormControlLabel
          className={cx(classes.nested, classes.formLabel)}
          control={
            <Checkbox
              checked={inactivity.completelyClear}
              color="primary"
              disabled={!inactivity.enabled}
              onChange={e => onInactivityChange({ ...inactivity, completelyClear: e.target.checked })}
            />
          }
          label="Completely clear host entry, allowing it to reappear if it starts reporting."
        />
        <FormControlLabel
          className={ownClasses.row}
          control={
            <Checkbox
              checked={deletedHosts.enabled}
              color="primary"
              onChange={e => onDeletedHostsChange({ ...deletedHosts, enabled: e.target.checked })}
            />
          }
          label={
            <Box className={classes.labelRow}>
              <span>Automatically clean up deleted host entries</span>
              <TextField
                className={ownClasses.daysInput}
                type="number"
                value={deletedHosts.days}
                onClick={stopPropagation}
                onChange={e => onDeletedHostsChange({ ...deletedHosts, days: Number(e.target.value) || 1 })}
              />
              <span>days after deletion.</span>
            </Box>
          }
        />
        <Typography className={ownClasses.helpText}>
          Host entries are completely cleared, meaning they will reappear if it starts reporting.
        </Typography>
      </Box>
    </Box>
  );
};

export default TimeBasedCleanupSection;
