import React, { useEffect, useState } from "react";
import { ArrowIcon } from "../../../../icons/ExportCommonIcons";
import RegularDropDown from "../../../../ui/inputs/RegularDropDown";
import InputRange from "../../../../ui/inputs/InputRange";
import { useWidgetStore } from "../../../../../store/useWidgetStore";
import ChartComponent from "../../../sidebarLeft/visualization/widgets/ChartComponent";

const defaultStyle = {
  theme: "Glass",
  elementColor: "#ffffff",
  blurEffect: 10,
  opacity: 10,
  selectedElement: "Glass",
};

const defaultChartData = {
  duration: "1h",
  measurements: {},
  datasets: [
    {
      data: [65, 59, 80, 81, 56, 55, 40],
      backgroundColor: "#6f42c1",
      borderColor: "#b392f0",
      borderWidth: 1,
    },
  ],
  labels: ["January", "February", "March", "April", "May", "June", "July"],
};

const Design = () => {
  const { selectedChartId } = useWidgetStore();
  const [styles, setStyles] = useState<Record<string, typeof defaultStyle>>({});

  const currentStyle = selectedChartId
    ? styles[selectedChartId.id] || defaultStyle
    : defaultStyle;

  const updateStyle = (updates: Partial<typeof defaultStyle>) => {
    if (!selectedChartId) return;
    setStyles((prev) => ({
      ...prev,
      [selectedChartId.id]: { ...currentStyle, ...updates },
    }));
  };

  useEffect(() => {
    // console.log("Styles", styles);
  }, [styles]);

  return (
    <div className="design">
      <div className="appearance-container">
        <div className="header-container">
          <div className="head">Appearance</div>
          <div className="icon">
            <ArrowIcon />
          </div>
        </div>

        <div className="appearance-style">
          <div className="theme-wrapper">
            <div className="key">Theme</div>
            <div className="value">
              <RegularDropDown
                header={currentStyle.theme}
                options={["Glass", "Fill", "Transparent"]}
                onSelect={(theme) => updateStyle({ theme })}
              />
            </div>
          </div>

          {currentStyle.theme === "Glass" && (
            <div className="blurEffect-wrapper">
              <InputRange
                label="Blur Effects"
                disabled={false}
                value={currentStyle.blurEffect}
                min={0}
                max={50}
                onChange={(blurEffect) => updateStyle({ blurEffect })}
                onPointerUp={() => {}}
              />
            </div>
          )}

          {currentStyle.theme !== "Fill" && (
            <div className="opacity-wrapper">
              <InputRange
                label="Opacity"
                disabled={false}
                value={currentStyle.opacity}
                min={0}
                max={50}
                onChange={(opacity) => updateStyle({ opacity })}
                onPointerUp={() => {}}
              />
            </div>
          )}

          <div className="color-wrapper">
            <div className="key">Color</div>
            <div className="value">
              <input
                type="color"
                value={currentStyle.elementColor}
                onChange={(e) => updateStyle({ elementColor: e.target.value })}
              />
              <span style={{ marginLeft: "10px" }}>
                {currentStyle.elementColor}
              </span>
            </div>
          </div>
        </div>
      </div>

      <div className="element-container">
        <div className="display-element">
          {selectedChartId ? (
            <ChartComponent
              type={selectedChartId?.type ?? "bar"}
              title={selectedChartId?.title ?? "Chart"}
              data={{
                labels:
                  selectedChartId?.data?.labels ?? defaultChartData.labels,
                datasets: selectedChartId?.data?.datasets?.length
                  ? selectedChartId.data.datasets
                  : defaultChartData.datasets,
              }}
            />
          ) : (
            "No Preview"
          )}
        </div>

        <div className="name-wrapper">
          <div className="key">Name</div>
          <input className="value" type="text" />
        </div>

        <div className="element-wrapper">
          <div className="key">Element</div>
          <div className="value">
            <RegularDropDown
              header={currentStyle.selectedElement}
              options={["Glass", "Fill", "Transparent"]}
              onSelect={(selectedElement) => updateStyle({ selectedElement })}
            />
          </div>
        </div>
      </div>
    </div>
  );
};

export default Design;
