import ToggleButton from "@mui/material/ToggleButton";
import ToggleButtonGroup from "@mui/material/ToggleButtonGroup";
import { useState } from "react";

export function SegmentControl({ value = "avg" }) {
  const [selected, setSelected] = useState(value);

  return (
    <ToggleButtonGroup
      className="segmented"
      exclusive
      size="small"
      value={selected}
      onChange={(_, nextValue) => {
        if (nextValue) {
          setSelected(nextValue);
        }
      }}
      sx={{
        border: "1px solid var(--border)",
        backgroundColor: "var(--bg-card-strong)",
        "& .MuiToggleButtonGroup-grouped": {
          border: 0,
          margin: 0
        }
      }}
    >
      <ToggleButton className="segment" value="avg" sx={segmentSx}>
        平均值
      </ToggleButton>
      <ToggleButton className="segment" value="peak" sx={segmentSx}>
        峰值
      </ToggleButton>
    </ToggleButtonGroup>
  );
}

const segmentSx = {
  minWidth: 52,
  height: "var(--status-height)",
  padding: "0 var(--space-3)",
  borderRadius: "var(--radius-control) !important",
  color: "var(--text-tertiary)",
  fontSize: "var(--admin-font-size)",
  lineHeight: "var(--admin-line-height)",
  "&.Mui-selected": {
    backgroundColor: "var(--primary-surface)",
    color: "var(--text-primary)"
  },
  "&.Mui-selected:hover": {
    backgroundColor: "var(--primary-surface-strong)"
  }
};
