import Box from "@mui/material/Box";
import Checkbox, { type CheckboxProps } from "@mui/material/Checkbox";
import type { SxProps, Theme } from "@mui/material/styles";

export type AppCheckboxProps = CheckboxProps;

const CHECKBOX_SIZE = 20;
const BOX_SIZE = 17;
const PRIMARY_COLOR = "#1a64a8";

const checkboxBoxSx = {
  width: BOX_SIZE,
  height: BOX_SIZE,
  borderRadius: "4px",
  border: "1px solid #d0d5dd",
  bgcolor: "#ffffff",
  display: "flex",
  alignItems: "center",
  justifyContent: "center",
};

function getSxArray(sx?: SxProps<Theme>) {
  if (!sx) return [];

  return Array.isArray(sx) ? sx : [sx];
}

function UncheckedCheckboxIcon() {
  return (
    <Box
      component="span"
      className="AppCheckbox-box"
      sx={checkboxBoxSx}
    />
  );
}

function CheckedCheckboxIcon() {
  return (
    <Box
      component="span"
      className="AppCheckbox-box"
      sx={{
        ...checkboxBoxSx,
        borderColor: PRIMARY_COLOR,
        bgcolor: PRIMARY_COLOR,
      }}
    >
      <Box
        component="span"
        sx={{
          width: 12,
          height: 12,
          position: "relative",
          "&::after": {
            content: '""',
            position: "absolute",
            left: "3px",
            top: "1px",
            width: "4px",
            height: "8px",
            border: "solid #ffffff",
            borderWidth: "0 2px 2px 0",
            transform: "rotate(45deg)",
          },
        }}
      />
    </Box>
  );
}

export function AppCheckbox({
  sx,
  icon = <UncheckedCheckboxIcon />,
  checkedIcon = <CheckedCheckboxIcon />,
  disableRipple = true,
  ...props
}: AppCheckboxProps) {
  return (
    <Checkbox
      icon={icon}
      checkedIcon={checkedIcon}
      disableRipple={disableRipple}
      sx={[
        {
          width: CHECKBOX_SIZE,
          height: CHECKBOX_SIZE,
          p: 0,
          color: "#d0d5dd",
          "&.Mui-checked": {
            color: PRIMARY_COLOR,
          },
          "&.Mui-focusVisible .AppCheckbox-box": {
            outline: "2px solid #98c7ef",
            outlineOffset: 2,
          },
          "&.Mui-disabled": {
            opacity: 0.5,
          },
        },
        ...getSxArray(sx),
      ]}
      {...props}
    />
  );
}