import Box from "@mui/material/Box";
import Typography from "@mui/material/Typography";

interface LegendStyleConfig {
  layerName: string;
  layerId: string;
  property: string;
  colors: string[];
  type: string; // 图例类型
  dimensions: number[]; // 尺寸大小
  breaks: number[]; // 分段值
}
// 图例组件
// 该组件用于显示图层样式的图例，包含属性名称、颜色、尺寸和分段值等信息
// 通过传入的配置对象动态生成图例内容，适用于不同的样式配置
// 使用时需要确保传入的 colors、dimensions 和 breaks 数组长度一致

const StyleLegend: React.FC<LegendStyleConfig> = ({
  layerName,
  layerId,
  property,
  colors,
  type, // 图例类型
  dimensions,
  breaks,
}) => {
  return (
    <Box
      key={layerId}
      className="bg-white p-3 rounded-xl max-w-xs opacity-95  transition-opacity duration-300 hover:opacity-100"
    >
      <Typography variant="subtitle2" gutterBottom>
        {layerName} - {property}
      </Typography>
      {[...Array(breaks.length)].map((_, index) => {
        const color = colors[index]; // 默认颜色为黑色
        const dimension = dimensions[index]; // 默认尺寸为16

        // // 处理第一个区间（小于 breaks[0]）
        // if (index === 0) {
        //   return (
        //     <Box key={index} className="flex items-center gap-2 mb-1">
        //       <Box
        //         sx={
        //           type === "point"
        //             ? {
        //                 width: dimension,
        //                 height: dimension,
        //                 borderRadius: "50%",
        //                 backgroundColor: color,
        //               }
        //             : {
        //                 width: 16,
        //                 height: dimension,
        //                 backgroundColor: color,
        //                 border: `1px solid ${color}`,
        //               }
        //         }
        //       />
        //       <Typography variant="caption" className="text-xs">
        //         {"<"} {breaks[0]?.toFixed(1)}
        //       </Typography>
        //     </Box>
        //   );
        // }

        // 处理中间区间（breaks[index] - breaks[index + 1]）
        if (index + 1 < breaks.length) {
          const prevValue = breaks[index];
          const currentValue = breaks[index + 1];
          return (
            <Box key={index} className="flex items-center gap-2 mb-1">
              <Box
                sx={
                  type === "point"
                    ? {
                        width: dimension,
                        height: dimension,
                        borderRadius: "50%",
                        backgroundColor: color,
                      }
                    : {
                        width: 16,
                        height: dimension,
                        backgroundColor: color,
                        border: `1px solid ${color}`,
                      }
                }
              />
              <Typography variant="caption" className="text-xs">
                {prevValue?.toFixed(1)} - {currentValue?.toFixed(1)}
              </Typography>
            </Box>
          );
        }

        return null;
      })}
    </Box>
  );
};

export default StyleLegend;
export type { LegendStyleConfig };