import React from 'react';

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

import type { HostIdentifierOption } from '../store/managementSlice';

const useStyles = makeStyles()(theme => ({
  description: {
    marginBottom: theme.spacing(2),
  },
  option: {
    alignItems: 'flex-start',
    marginBottom: theme.spacing(1),
    '& .MuiFormControlLabel-label': {
      paddingTop: 9,
    },
  },
  example: {
    display: 'block',
    color: theme.palette.text.secondary,
    fontSize: 12,
  },
}));

const toIdentifier = (scope: string, name: string) => `default.${scope}.${name}`;

type Props = {
  options: HostIdentifierOption[];
  value: string;
  onChange: (value: string) => void;
};

export const HostIdentifierSection = ({ options, value, onChange }: Props) => {
  const { classes } = useStyles();
  return (
    <Box>
      <Typography component="h2" variant="h6" sx={{ fontSize: 16 }}>
        Host identifier
      </Typography>
      <Typography variant="body2" className={classes.description}>
        The host identifier is the default attribute used everywhere in the Mission Portal, including reports and the APIs, to identify a given host.
      </Typography>
      <RadioGroup value={value} onChange={e => onChange(e.target.value)}>
        {options.map(option => {
          const optionValue = toIdentifier(option.scope, option.name);
          return (
            <FormControlLabel
              key={optionValue}
              value={optionValue}
              className={classes.option}
              control={<Radio color="primary" />}
              label={
                <>
                  {option.label}
                  {option.example && <span className={classes.example}>e.g. {option.example}</span>}
                </>
              }
            />
          );
        })}
      </RadioGroup>
    </Box>
  );
};

export default HostIdentifierSection;
