import { type FC } from 'react';

import { IconLayoutGrid, IconLayoutList } from '@material-hu/icons/tabler';
import { useTheme } from '@material-hu/mui/styles';
import ToggleButton from '@material-hu/mui/ToggleButton';
import ToggleButtonGroup from '@material-hu/mui/ToggleButtonGroup';

import { ServiceItemDesignLayout } from 'src/pages/dashboard/serviceManagement/types';

export type ToggleDisplayLayoutProps = {
  designType: ServiceItemDesignLayout;
  onChangeDesignType: (
    event: React.MouseEvent<HTMLElement>,
    newDesignLayout: ServiceItemDesignLayout,
  ) => void;
};

const ToggleDisplayLayout: FC<ToggleDisplayLayoutProps> = ({
  designType,
  onChangeDesignType,
}) => {
  const theme = useTheme();

  return (
    <ToggleButtonGroup
      color="primary"
      value={designType}
      onChange={onChangeDesignType}
      sx={{
        backgroundColor: ({ palette }) =>
          palette.new.background.layout.tertiary,
        height: '40px',
        border: ({ palette }) =>
          `1px solid ${palette.new.border.neutral.brand}`,
      }}
      exclusive
    >
      <ToggleButton
        value={ServiceItemDesignLayout.GRID}
        sx={{
          border: 0,
          borderRight: ({ palette }) =>
            `1px solid ${palette.new.border.neutral.brand}`,
        }}
      >
        <IconLayoutGrid color={theme.palette.new.text.neutral.brand} />
      </ToggleButton>
      <ToggleButton
        value={ServiceItemDesignLayout.LIST}
        sx={{
          border: 0,
        }}
      >
        <IconLayoutList color={theme.palette.new.text.neutral.brand} />
      </ToggleButton>
    </ToggleButtonGroup>
  );
};

export default ToggleDisplayLayout;
