import { useState } from "react";
import {
  applyRadioGroupWrapperStyle,
  baseRadioGroupContainerStyle,
} from "@/page/App/components/InspectPanel/PanelSetters/RadioGroupSetter/style";
import { PanelLabel } from "@/page/App/components/InspectPanel/components/Label";
import { BaseRadioGroupProps } from "./interface";
import ToggleButton from "@mui/material/ToggleButton";
import ToggleButtonGroup from "@mui/material/ToggleButtonGroup";

const BaseRadioGroupSetter = (props: BaseRadioGroupProps) => {
  const {
    options,
    defaultValue,
    isSetterSingleRow = false,
    attrName,
    labelName,
    labelDesc,
    handleUpdateDsl,
  } = props;

  const [alignment, setAlignment] = useState(defaultValue || "small");

  const handleChange = (_, value: string) => {
    setAlignment(value);

    handleUpdateDsl(attrName, value);
  };

  return (
    <div css={baseRadioGroupContainerStyle(isSetterSingleRow)} key={`${attrName}-wrapper`}>
      {labelName && (
        <span>
          <PanelLabel
            labelName={labelName}
            labelDesc={labelDesc}
            labelSize="medium"
          />
        </span>
      )}
      <div css={applyRadioGroupWrapperStyle(isSetterSingleRow)}>
        <ToggleButtonGroup
          color="primary"
          value={alignment}
          exclusive
          onChange={handleChange}
          aria-label="Platform"
        >
          {options.map(({ label, value }) => (
            <ToggleButton sx={{fontSize:"9px",fontWeight:500}} key ={value} value={value} size="small">
              {label}
            </ToggleButton>
          ))}
        </ToggleButtonGroup>
      </div>
    </div>
  );
};

BaseRadioGroupSetter.displayName = "BaseRadioGroupSetter";

export default BaseRadioGroupSetter;
