import { useState } from "react";
import type { ChartType, ChartWidget } from "../types";

const initialWidgets: ChartWidget[] = [
  {
    id: "1",
    type: "line",
    title: "Линии",
    dataKey: "chart-line",
    visible: true,
  },
  {
    id: "2",
    type: "bar",
    title: "Столбцы",
    dataKey: "chart-bar",
    visible: true,
  },
  {
    id: "3",
    type: "area",
    title: "Закрашенные линии",
    dataKey: "chart-area",
    visible: true,
  },
  {
    id: "4",
    type: "pie",
    title: "Круговая диаграмма",
    dataKey: "chart-pie",
    visible: true,
  },
];

export const useWidgets = () => {
  const [widgets, setWidgets] = useState<ChartWidget[]>(initialWidgets);

  const addWidget = (data: {
    type: ChartType;
    title: string;
    dataKey: string;
  }) => {
    const newWidget: ChartWidget = {
      id: Date.now().toString(),
      ...data,
      visible: true,
    };
    setWidgets([...widgets, newWidget]);
  };

  const updateWidget = (updated: ChartWidget) => {
    setWidgets(widgets.map((w) => (w.id === updated.id ? updated : w)));
  };

  const removeWidget = (id: string) => {
    setWidgets(widgets.filter((w) => w.id !== id));
  };

  const toggleVisibility = (id: string) => {
    setWidgets(
      widgets.map((w) => (w.id === id ? { ...w, visible: !w.visible } : w)),
    );
  };

  return {
    widgets,
    addWidget,
    updateWidget,
    removeWidget,
    toggleVisibility,
  };
};