import { useContext, useEffect, useState } from '@wordpress/element';
import { useSelect } from '@wordpress/data';
import { Notice } from '@wordpress/components';
import has from 'lodash/has';
import { useStore } from 'zustand';
import { DesignContext } from '@components/DesignPanel/DesignStore';

export const ExistingStyleChecker = (props: any) => {
  const store = useStore(useContext(DesignContext));
  const { currentControl } = store;
  const [conflicts, setConflicts] = useState<any>({});

  const selectedBlock = useSelect(
    // @ts-ignore
    (select) => select('core/block-editor').getSelectedBlock(),
    []
  );

  useEffect(() => {
    setConflicts({});
    let newConflicts = {};

    if (selectedBlock?.attributes?.style?.spacing) {
      const { padding, margin } = selectedBlock.attributes.style.spacing;

      const properties = ['top', 'left', 'bottom', 'right'];
      let paddingMessages: string[] = [];
      let marginMessages: string[] = [];

      properties.forEach((prop) => {
        if (padding && has(padding, prop)) {
          paddingMessages.push(`WordPress padding ${prop}`);
        }
        if (margin && has(margin, prop)) {
          marginMessages.push(`WordPress margin ${prop}`);
        }
      });

      newConflicts = {
        ...newConflicts,
        padding: paddingMessages.join(', '),
        margin: marginMessages.join(', '),
      };
    }

    if (selectedBlock?.attributes?.backgroundColor) {
      newConflicts = {
        ...newConflicts,
        bgcolor: 'WordPress background color',
      };
    }

    if (selectedBlock?.attributes?.textColor) {
      newConflicts = {
        ...newConflicts,
        textcolor: 'WordPress text color',
      };
    }

    if (selectedBlock?.attributes?.fontSize) {
      newConflicts = {
        ...newConflicts,
        fontsize: 'WordPress font size',
      };
    }

    if (selectedBlock?.attributes?.fontFamily) {
      newConflicts = {
        ...newConflicts,
        fontfamily: 'WordPress font family',
      };
    }

    if (selectedBlock?.attributes?.style?.typography) {
      const { fontWeight, lineHeight, textDecoration } =
        selectedBlock.attributes.style.typography;

      if (fontWeight) {
        newConflicts = {
          ...newConflicts,
          fontweight: 'WordPress font weight',
        };
      }
      if (lineHeight) {
        newConflicts = {
          ...newConflicts,
          lineheight: 'WordPress line height',
        };
      }
      if (textDecoration) {
        newConflicts = {
          ...newConflicts,
          decoration: 'WordPress text decoration',
        };
      }
    }

    setConflicts(newConflicts);
  }, [selectedBlock]);

  const conflictMessage =
    conflicts[currentControl?.id] || conflicts[props.currentModifierId] || '';

  return (
    <>
      {conflictMessage && (
        <Notice className="mb-2" status="warning" isDismissible={false}>
          <strong>{conflictMessage}</strong> may conflict with Blockbite styles.
        </Notice>
      )}
    </>
  );
};

export default ExistingStyleChecker;