import { useState } from '@wordpress/element';
import { useSelect } from '@wordpress/data';

import { ItemProps } from '@components/DesignPanel/types';
import { ButtonToggleGroup } from '@components/ui/ButtonToggle';
import { Button, ButtonGroup } from '@wordpress/components';

const PresetButtons = (props: {
  presets: any[];
  emitPreset: (design: any) => void;
}) => {
  return (
    <ButtonGroup>
      {props.presets.map((p: any, i: number) => (
        <Button
          key={`flexPreset_${i}`}
          variant="secondary"
          onClick={() => {
            props.emitPreset({
              presetStyle: JSON.parse(p.content).presetStyle,
              presetClass: JSON.parse(p.content).presetClass,
            });
          }}
        >
          {p.title}
        </Button>
      ))}
    </ButtonGroup>
  );
};

export const StyleInspectorPresets = (props: any) => {
  const { blockname, setAttributes } = props;
  const [platform, setPlatform] = useState<string>('site');

  const presets = useSelect(
    (select) => {
      // @ts-ignore
      const results = select('biteStore/presets').getFiltered(
        platform,
        blockname
      );
      return results.filter((item: ItemProps) => item.blockname === blockname);
    },
    [platform, blockname]
  );

  const stylePresets = presets.filter(
    (item: ItemProps) => item.category === 'style'
  );
  const layoutPresets = presets.filter(
    (item: ItemProps) => item.category === 'layout'
  );
  const mediaPresets = presets.filter(
    (item: ItemProps) => item.category === 'media'
  );
  const hasMultiplePresetTypes =
    [
      stylePresets.length > 0,
      layoutPresets.length > 0,
      mediaPresets.length > 0,
    ].filter((entry) => entry).length > 1;

  return (
    <div className="w-60 overflow-auto px-4 pb-1">
      <ButtonToggleGroup
        display="label"
        onPressedChange={(value: string) => {
          setPlatform(value);
        }}
        className="my-4"
        size="default"
        options={['site', 'blockbite'].map((option: string) => ({
          value: option,
          icon: null,
          label: option,
        }))}
      ></ButtonToggleGroup>
      {presets.length ? (
        <ul role="list" className="divide-gray-light divide-y">
          {!!stylePresets.length && (
            <li className="mb-0 py-3">
              {hasMultiplePresetTypes && (
                <div className="mb-2.5 text-[10px] font-medium uppercase opacity-50">
                  Style
                </div>
              )}
              <div className="flex flex-row flex-wrap items-center gap-2.5">
                <PresetButtons
                  presets={stylePresets}
                  emitPreset={(design: any) => {
                    setAttributes({
                      biteClass: design.presetClass,
                      biteStyle: design.presetStyle,
                    });
                  }}
                />
              </div>
            </li>
          )}

          {!!layoutPresets.length && (
            <li className="mb-0 py-3">
              {hasMultiplePresetTypes && (
                <div className="mb-2.5 text-[10px] font-medium uppercase opacity-50">
                  Layout
                </div>
              )}
              <div className="flex flex-row flex-wrap items-center gap-2.5">
                <PresetButtons
                  presets={layoutPresets}
                  emitPreset={(design: any) => {
                    setAttributes({
                      flexClass: design.presetClass,
                      flexStyle: design.presetStyle,
                    });
                  }}
                />
              </div>
            </li>
          )}

          {!!mediaPresets.length && (
            <li className="mb-0 py-3">
              {hasMultiplePresetTypes && (
                <div className="mb-2.5 text-[10px] font-medium uppercase opacity-50">
                  Visual
                </div>
              )}
              <div className="flex flex-row flex-wrap items-center gap-2.5">
                <PresetButtons
                  presets={mediaPresets}
                  emitPreset={(design: any) => {
                    setAttributes({
                      mediaClass: design.presetClass,
                      mediaStyle: design.presetStyle,
                    });
                  }}
                />
              </div>
            </li>
          )}
        </ul>
      ) : (
        <div className="py-4">No {platform} presets for this block.</div>
      )}
    </div>
  );
};