import { Box, Checkbox, FormControlLabel, Typography } from '@mui/material';

import type { SectionClasses } from '../HostManagement';
import type { DuplicateCleanup } from '../store/managementSlice';

type Props = {
  hostname: DuplicateCleanup;
  ip: DuplicateCleanup;
  onHostnameChange: (value: DuplicateCleanup) => void;
  onIpChange: (value: DuplicateCleanup) => void;
  classes: SectionClasses;
};

type RowProps = {
  label: string;
  value: DuplicateCleanup;
  onChange: (value: DuplicateCleanup) => void;
  classes: SectionClasses;
};

const Row = ({ label, value, onChange, classes }: RowProps) => (
  <>
    <FormControlLabel
      className={classes.formLabel}
      control={
        <Checkbox checked={value.enabled} color="primary" onChange={e => onChange({ ...value, enabled: e.target.checked })} />
      }
      label={label}
    />
    <FormControlLabel
      className={`${classes.nested} ${classes.formLabel}`}
      control={
        <Checkbox
          checked={value.completelyClear}
          color="primary"
          disabled={!value.enabled}
          onChange={e => onChange({ ...value, completelyClear: e.target.checked })}
        />
      }
      label="Completely clear host entry, allowing it to reappear if it starts reporting."
    />
  </>
);

export const DuplicateResolutionSection = ({ hostname, ip, onHostnameChange, onIpChange, classes }: Props) => (
  <Box>
    <Typography component="h3" variant="h6" sx={{ fontWeight: 500, fontSize: 16, mb: 2 }}>
      Duplicate resolution
    </Typography>
    <Box sx={{ display: 'flex', flexDirection: 'column' }}>
      <Row
        label="Automatically delete oldest host when duplicate hostname exists."
        value={hostname}
        onChange={onHostnameChange}
        classes={classes}
      />
      <Row
        label="Automatically delete oldest host when duplicate IP addresses exist."
        value={ip}
        onChange={onIpChange}
        classes={classes}
      />
    </Box>
  </Box>
);

export default DuplicateResolutionSection;
