import FormControl from "@mui/material/FormControl";
import Checkbox from "@mui/material/Checkbox";
import FormControlLabel from "@mui/material/FormControlLabel";
import { CheckboxContainerProps } from "./interface";
import { AutoHeightContainer } from "@/widgetLibrary/PublicSector/AutoHeightContainer";

import { getIcon } from "./icons";

export const CheckboxContainer = ({
  label,
  checked = false,
  disabled = false,
  onChange = () => null,
  error = false,
  labelPlacement,
  required,
  tooltipText,
  styles = {},
  updateComponentHeight,
  color,
  iconName,
  checkedIconName,
}: CheckboxContainerProps) => {

  const makeIconProps = (iconName,checkedIconName)=>{
        
    let obj={};

    if(iconName!==""){
      obj={icon:getIcon(iconName)}
    }else{
      obj={};
    }
    
    if(checkedIconName){
      obj={...obj,checkedIcon:getIcon(checkedIconName)}
    }

    return obj;
  }


  return (
    <AutoHeightContainer updateComponentHeight={updateComponentHeight}>
      <FormControl
        error={error}
        sx={{ display: "flex", justifyContent: "center", ...styles }}
      >
        <FormControlLabel
          control={
            <Checkbox
              checked={checked}
              disabled={disabled}
              onChange={onChange}
              required={required}
              title={tooltipText}
              color={color}
              {...makeIconProps(iconName,checkedIconName)}
              // icon={getIcon(iconName)}
              // checkedIcon={getIcon(checkedIconName)}
            />
          }
          label={label}
          labelPlacement={labelPlacement}
          sx={{ display: "flex", justifyContent: "center", ...styles }}
        />
      </FormControl>
    </AutoHeightContainer>
  );
};

CheckboxContainer.displayName = "CheckboxContainer";
