/**
 * External dependencies
 */
import styled from "@emotion/styled";

/**
 * WordPress dependencies
 */
import { __ } from "@wordpress/i18n";
import apiFetch from "@wordpress/api-fetch";
import { useState, useEffect, useContext } from "@wordpress/element";
import { Spinner, TextControl } from "@wordpress/components";
import { useEntityProp } from "@wordpress/core-data";
import { applyFilters } from "@wordpress/hooks";

/**
 * Internal dependencies
 */
import { Widget, Fieldset, SaveActions, useHandleSave } from "sdk/components";
import { DataContext } from "../../data";
import "./hooks";

const CategoryList = styled.ul`
  li {
    display: flex;
    align-items: center;
    align-self: start;
    flex-wrap: wrap;
    gap: 0.2em;
    padding: 6px 0;
    margin: 0;
    border-bottom: 1px solid #ddd;
  }

  .fieldset__item__actions {
    margin-left: auto;

    > * + * {
      margin-left: 8px;
    }
  }

  .components-base-control + .components-base-control {
    margin-left: 8px;
  }

  .components-base-control__field {
    margin-bottom: 0;
  }
`;

const PatternCategories = () => {
  const { Messages } = useContext(DataContext);
  const [isLoading, setIsLoading] = useState(true);
  const [registeredCategories, setRegisteredCategories] = useState([]);
  const [customCategories, setCustomCategories] = useEntityProp(
    "root",
    "site",
    "cbb_pattern_categories",
  );

  const [allCategoriesLabel, setAllCategoriesLabel] = useEntityProp(
    "root",
    "site",
    "cbb_pattern_categories_all_label",
  );

  useEffect(() => {
    apiFetch({ path: "boldblocks/v1/getPatternCategories" }).then((res) => {
      setRegisteredCategories(res);
      setIsLoading(false);
    });
  }, []);

  const { handleSave, MessageNotice } = useHandleSave(Messages);

  return (
    <Widget
      title={__("Manage pattern categories", "content-blocks-builder")}
      renderFooter={() => <SaveActions onSave={handleSave} />}
    >
      <p>
        {__(
          "You can create custom pattern categories for this site such as 'Carousel', 'Hero'... Don't register new categories with the same name and label as those already registered.",
          "content-blocks-builder",
        )}
      </p>
      <p>
        {__(
          "Following pattern categories are already registered:",
          "content-blocks-builder",
        )}
      </p>
      <Fieldset className="fieldset">
        {isLoading && <Spinner />}
        {registeredCategories.length > 0 && (
          <ul className="fieldset__list">
            {registeredCategories.map(({ name, label }) => (
              <li key={name}>
                <code>{name}</code>
                <span>{" - "}</span>
                <span>{label}</span>
              </li>
            ))}
          </ul>
        )}
      </Fieldset>
      {applyFilters("boldblocks.settings.patternCategories", null, {
        Fieldset,
        CategoryList,
        customCategories,
        setCustomCategories,
        registeredCategories,
      })}
      <Fieldset className="fieldset">
        <div className="fieldset__label">
          <strong>
            {__(
              "Change the label for the 'all custom patterns' category.",
              "content-blocks-builder",
            )}
          </strong>
        </div>
        <TextControl
          value={allCategoriesLabel ?? ""}
          onChange={setAllCategoriesLabel}
        />
      </Fieldset>
      <MessageNotice />
    </Widget>
  );
};

export default PatternCategories;
