import { useEffect, useState } from "react";

import apiRequest from "@wordpress/api-fetch";
import { __ } from "@wordpress/i18n";

import {
  PanelBody,
  SelectControl,
  ToggleControl,
  __experimentalUnitControl as UnitControl,
} from "@wordpress/components";

import { MultiSelectControl } from "@codeamp/block-components";

import { Grid } from "@/block-panels/grid";
import { ShowHide } from "@/block-panels/show-hide";

export const Controls = (props) => {
  const [items, setItems] = useState([]);

  const { attributes, setAttributes, calendar, setView } = props;

  const startday = attributes?.startday
    ? attributes.startday
    : calendar?.startday;

  const timeframe = attributes?.timeframe
    ? attributes.timeframe
    : calendar?.timeframe;

  const resetColors = () => {
    setAttributes({
      color: undefined,
    });
  };

  const colors = [{ value: "color", label: __("Accent", "eventkoi-lite") }];

  const getCalendars = async () => {
    let response = await apiRequest({
      path: `${eventkoi_params.api}/calendars`,
      method: "get",
    })
      .then((response) => {
        if (response) {
          let calendars = [];
          response.map((calendar, index) => {
            calendars.push({ label: calendar.name, value: calendar.id });
          });
          setItems(calendars);
        }
      })
      .catch((error) => {});
  };

  useEffect(() => {
    getCalendars();
  }, []);

  useEffect(() => {
    if (attributes.selectAllCalendars) return;
    if (
      items.length > 0 &&
      (!attributes.calendars || attributes.calendars.length === 0)
    ) {
      setAttributes({ calendars: [Number(eventkoi_params.default_cal)] });
    }
  }, [items, attributes.calendars, attributes.selectAllCalendars]);

  const units = [{ value: "px", label: "px", default: 0 }];

  return (
    <>
      <PanelBody title={__("Display options", "eventkoi-lite")} initialOpen={true}>
        <ToggleControl
          label={__("Select all calendars", "eventkoi-lite")}
          help={__(
            "Automatically include every calendar — including any calendars added later.",
            "eventkoi-lite"
          )}
          checked={!!attributes.selectAllCalendars}
          onChange={(value) =>
            setAttributes({
              selectAllCalendars: value,
              calendars: value ? [] : attributes.calendars || [],
            })
          }
          __nextHasNoMarginBottom
        />
        {!attributes.selectAllCalendars && items && items.length > 0 && (
          <MultiSelectControl
            label={__("Select calendar(s)", "eventkoi-lite")}
            value={attributes.calendars || []}
            options={items}
            onChange={(selected) => {
              setAttributes({ calendars: selected });
            }}
            __nextHasNoMarginBottom
          />
        )}
      </PanelBody>
      <PanelBody
        title={__("Show/hide components", "eventkoi-lite")}
        initialOpen={true}
      >
        <ShowHide
          id="showImage"
          label={__("Featured image", "eventkoi-lite")}
          attributes={attributes}
          setAttributes={setAttributes}
        ></ShowHide>
        <ShowHide
          id="showLocation"
          label={__("Location", "eventkoi-lite")}
          attributes={attributes}
          setAttributes={setAttributes}
        ></ShowHide>
        <ShowHide
          id="showDescription"
          label={__("Description", "eventkoi-lite")}
          attributes={attributes}
          setAttributes={setAttributes}
        ></ShowHide>
      </PanelBody>
      <PanelBody title={__("Design options", "eventkoi-lite")} initialOpen={true}>
        <Grid>
          <SelectControl
            label={__("Line style", "eventkoi-lite")}
            value={attributes.borderStyle}
            options={[
              { label: "Solid", value: "solid" },
              { label: "Dotted", value: "dotted" },
              { label: "Dashed", value: "dashed" },
              { label: "Double", value: "double" },
              { label: "None", value: "none" },
            ]}
            onChange={(value) => setAttributes({ borderStyle: value })}
            __next40pxDefaultSize
            __nextHasNoMarginBottom
          />
          <UnitControl
            label={__("Thickness", "eventkoi-lite")}
            __next40pxDefaultSize
            onChange={(value) => setAttributes({ borderSize: value })}
            value={attributes.borderSize}
            units={units}
          />
        </Grid>
      </PanelBody>
    </>
  );
};
