// removed: import { PanelColorSettings } from '@wordpress/block-editor';
import { __ } from '@wordpress/i18n';
import { PanelBody, Button } from '@wordpress/components';
import { typography } from '@wordpress/icons';
import { useDevice } from '../../controls/DeviceContext';
import { useSelect } from '@wordpress/data';

import Typography from './Typography';
import TypographyHover from './TypographyHover';

export default function TypographyControls({ attributes, setAttributes, activeStyleTab }) {
  const { activeDevice } = useDevice();

  const textColor = attributes.textColor || { desktop: '', tablet: '', mobile: '' };
  const textColor__hover = attributes.textColor__hover || { desktop: '', tablet: '', mobile: '' };
  const fontSize = attributes.fontSize || { desktop: '', tablet: '', mobile: '' };
  const fontSize__hover = attributes.fontSize__hover || { desktop: '', tablet: '', mobile: '' };
  const fontWeight = attributes.fontWeight || { desktop: '', tablet: '', mobile: '' };
  const fontWeight__hover = attributes.fontWeight__hover || { desktop: '', tablet: '', mobile: '' };
  const fontStyle = attributes.fontStyle || { desktop: '', tablet: '', mobile: '' };
  const fontStyle__hover = attributes.fontStyle__hover || { desktop: '', tablet: '', mobile: '' };
  const textAlign = attributes.textAlign || { desktop: '', tablet: '', mobile: '' };
  const textAlign__hover = attributes.textAlign__hover || { desktop: '', tablet: '', mobile: '' };
  const textTransform = attributes.textTransform || { desktop: '', tablet: '', mobile: '' };
  const textTransform__hover = attributes.textTransform__hover || { desktop: '', tablet: '', mobile: '' };
  const textDecoration = attributes.textDecoration || { desktop: '', tablet: '', mobile: '' };
  const textDecoration__hover = attributes.textDecoration__hover || { desktop: '', tablet: '', mobile: '' };
  const lineHeight = attributes.lineHeight || { desktop: '', tablet: '', mobile: '' };
  const lineHeight__hover = attributes.lineHeight__hover || { desktop: '', tablet: '', mobile: '' };
  const letterSpacing = attributes.letterSpacing || { desktop: '', tablet: '', mobile: '' };
  const letterSpacing__hover = attributes.letterSpacing__hover || { desktop: '', tablet: '', mobile: '' };
  const fontFamily = attributes.fontFamily || { desktop: '', tablet: '', mobile: '' };
  const fontFamily__hover = attributes.fontFamily__hover || { desktop: '', tablet: '', mobile: '' };

	const wpFontFamilies = useSelect((select) => {
		const settings = select('core/block-editor')?.getSettings?.() || {};
		const fams =
			settings?.__experimentalFeatures?.typography?.fontFamilies ||
			settings?.typography?.fontFamilies ||
			{};
		return fams; // { theme: [], custom: [], default: [] }
	}, []);

	const defaultFontFamilyOptions = [
		{ value: '', label: __('Default', 'axcelersblocks') },
		{ value: 'inherit', label: __('Inherit', 'axcelersblocks') },
	];

	const buildFontGroup = (items, label) => {
		if (!Array.isArray(items) || !items.length) return [];
		return [
			{ value: '', label, disabled: true },
			...items.map((f) => {
				const slug = f.slug || '';
				const name = f.name || slug || __('Font', 'axcelersblocks');

				// Prefer preset variable (best compatibility with theme.json + Font Library)
				const value = slug ? `var(--wp--preset--font-family--${slug})` : (f.fontFamily || '');

				return { label: name, value };
			}),
		];
	};

	const fontFamilyOptions = [
		...defaultFontFamilyOptions,
		...buildFontGroup(wpFontFamilies?.theme, __('Theme Fonts', 'axcelersblocks')),
		...buildFontGroup(wpFontFamilies?.custom, __('Installed Fonts', 'axcelersblocks')),
		...buildFontGroup(wpFontFamilies?.default, __('System Fonts', 'axcelersblocks')),
	];

  const updateDeviceAttribute = (attribute, value) => {
    setAttributes({
      [attribute]: {
        ...(attributes[attribute] || { desktop: '', tablet: '', mobile: '' }),
        [activeDevice]: value,
      },
    });
  };

  const clear = (obj) => ({ ...(obj || {}), [activeDevice]: '' });

  const resetTypography = () => {
    setAttributes({
      textColor: clear(textColor),
      fontSize: clear(fontSize),
      fontWeight: clear(fontWeight),
      fontStyle: clear(fontStyle),
      textAlign: clear(textAlign),
      textTransform: clear(textTransform),
      textDecoration: clear(textDecoration),
      lineHeight: clear(lineHeight),
      letterSpacing: clear(letterSpacing),
      fontFamily: clear(fontFamily),
    });
  };

  const resetTypographyHover = () => {
    setAttributes({
      textColor__hover: clear(textColor__hover),
      fontSize__hover: clear(fontSize__hover),
      fontWeight__hover: clear(fontWeight__hover),
      fontStyle__hover: clear(fontStyle__hover),
      textAlign__hover: clear(textAlign__hover),
      textTransform__hover: clear(textTransform__hover),
      textDecoration__hover: clear(textDecoration__hover),
      lineHeight__hover: clear(lineHeight__hover),
      letterSpacing__hover: clear(letterSpacing__hover),
      fontFamily__hover: clear(fontFamily__hover),
    });
  };

  return (
    <PanelBody
      className="typography-controls-wrapper"
      title={
        <span className="title" style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
          {typography}
          {activeStyleTab === 'main' ? __('Typography', 'axcelersblocks') : __('Typography (Hover)', 'axcelersblocks')}
        </span>
      }
      initialOpen={false}
    >
      {activeStyleTab === 'main' && (
        <>
          <Typography
            activeDevice={activeDevice}
						fontFamilyOptions={fontFamilyOptions}
            textColor={textColor}
            fontSize={fontSize}
            fontWeight={fontWeight}
            fontStyle={fontStyle}
            textAlign={textAlign}
            textTransform={textTransform}
            textDecoration={textDecoration}
            lineHeight={lineHeight}
            letterSpacing={letterSpacing}
            fontFamily={fontFamily}
            updateDeviceAttribute={updateDeviceAttribute}
          />
          <Button className="reset-btn" onClick={resetTypography}>
            {__('Reset', 'axcelersblocks')}
          </Button>
        </>
      )}

      {activeStyleTab === 'mainHover' && (
        <>
          <TypographyHover
            activeDevice={activeDevice}
						fontFamilyOptions={fontFamilyOptions}
            textColor__hover={textColor__hover}
            fontSize__hover={fontSize__hover}
            fontWeight__hover={fontWeight__hover}
            fontStyle__hover={fontStyle__hover}
            textAlign__hover={textAlign__hover}
            textTransform__hover={textTransform__hover}
            textDecoration__hover={textDecoration__hover}
            lineHeight__hover={lineHeight__hover}
            letterSpacing__hover={letterSpacing__hover}
            fontFamily__hover={fontFamily__hover}
            updateDeviceAttribute={updateDeviceAttribute}
          />
          <Button className="reset-btn" onClick={resetTypographyHover}>
            {__('Reset', 'axcelersblocks')}
          </Button>
        </>
      )}
    </PanelBody>
  );
}
