import { __ } from '@wordpress/i18n';
import { TextControl, SelectControl, ButtonGroup, Button } from '@wordpress/components';
import { PanelColorSettings } from '@wordpress/block-editor';
import { notAllowed, formatCapitalize, formatItalic, alignLeft, alignCenter, alignRight, alignJustify, formatLowercase, formatUppercase, formatUnderline, formatStrikethrough } from '@wordpress/icons';
import TextOverline from '../icons/TextOverline';
import { getResponsivePlaceholder, getResponsiveSelectOptions } from '../../controls/responsiveValueUtils';
import ResponsiveInheritedNotice from '../../controls/ResponsiveInheritedNotice';
import UnitValueControl from '../../controls/UnitValueControl';

export default function TypographyHover({
  activeDevice,
  textColor__hover,
  fontSize__hover, fontWeight__hover, fontStyle__hover,
  textAlign__hover, textTransform__hover, textDecoration__hover,
  lineHeight__hover, letterSpacing__hover, fontFamily__hover,
  fontFamilyOptions,
  updateDeviceAttribute,
}) {
  const fontWeightOptions = [
    { value: '', label: __('Default', 'axcelersblocks') },
    { value: 'normal', label: __('Normal', 'axcelersblocks') },
    { value: 'bold', label: __('Bold', 'axcelersblocks') },
    { value: '100', label: '100' }, { value: '200', label: '200' }, { value: '300', label: '300' },
    { value: '400', label: '400' }, { value: '500', label: '500' }, { value: '600', label: '600' },
    { value: '700', label: '700' }, { value: '800', label: '800' }, { value: '900', label: '900' },
  ];

  const fontStyleOptions = [
    { value: 'none', label: __('None', 'axcelersblocks'), icon: notAllowed },
    { value: 'normal', label: __('Normal', 'axcelersblocks'), icon: formatCapitalize },
    { value: 'italic', label: __('Italic', 'axcelersblocks'), icon: formatItalic },
  ];

  const textAlignOptions = [
    { value: 'left', label: __('Left', 'axcelersblocks'), icon: alignLeft },
    { value: 'center', label: __('Center', 'axcelersblocks'), icon: alignCenter },
    { value: 'right', label: __('Right', 'axcelersblocks'), icon: alignRight },
    { value: 'justify', label: __('Justify', 'axcelersblocks'), icon: alignJustify },
  ];

  const textTransformOptions = [
    { value: 'none', label: __('None', 'axcelersblocks'), icon: notAllowed },
    { value: 'uppercase', label: __('Uppercase', 'axcelersblocks'), icon: formatUppercase },
    { value: 'lowercase', label: __('Lowercase', 'axcelersblocks'), icon: formatLowercase },
    { value: 'capitalize', label: __('Capitalize', 'axcelersblocks'), icon: formatCapitalize },
  ];

  const textDecorationOptions = [
    { value: 'none', label: __('None', 'axcelersblocks'), icon: notAllowed },
    { value: 'underline', label: __('Underline', 'axcelersblocks'), icon: formatUnderline },
    { value: 'overline', label: __('Overline', 'axcelersblocks'), icon: <TextOverline /> },
    { value: 'line-through', label: __('Line Through', 'axcelersblocks'), icon: formatStrikethrough },
  ];
  const fontWeightSelectOptions = getResponsiveSelectOptions({
    values: fontWeight__hover,
    activeDevice,
    options: fontWeightOptions,
    inheritedLabel: __('Inherited', 'axcelersblocks'),
  });
  const fontFamilySelectOptions = getResponsiveSelectOptions({
    values: fontFamily__hover,
    activeDevice,
    options: fontFamilyOptions,
    inheritedLabel: __('Inherited', 'axcelersblocks'),
  });

  return (
    <>
      {/* Text Color (Hover) moved here */}
      <PanelColorSettings
        className="typography-color-picker"
        title={__('Text Color', 'axcelersblocks')}
        initialOpen={false}
        colorSettings={[
          {
            value: textColor__hover[activeDevice] || '',
            onChange: (value) => updateDeviceAttribute('textColor__hover', value),
            label: __('Text Color', 'axcelersblocks'),
          },
        ]}
      />
			<ResponsiveInheritedNotice
				values={ textColor__hover }
				activeDevice={ activeDevice }
			/>

      <UnitValueControl
        label={__('Font Size', 'axcelersblocks')}
        value={fontSize__hover[activeDevice] || ''}
        onChange={(value) => updateDeviceAttribute('fontSize__hover', value)}
        placeholder={getResponsivePlaceholder({
          values: fontSize__hover,
          activeDevice,
          fallback: 'e.g., 16px, 1rem',
        })}
        preset="fontSize"
        className="typography-control__font-size"
      />

      <SelectControl
        label={__('Font Weight', 'axcelersblocks')}
        value={fontWeight__hover[activeDevice] || ''}
        options={fontWeightSelectOptions}
        onChange={(value) => updateDeviceAttribute('fontWeight__hover', value)}
        className="typography-control__font-weight"
      />

      <div className="typography-control__font-style">
        <label className="components-base-control__label">{__('Font Style', 'axcelersblocks')}</label>
        <ButtonGroup className="typography-font-style-options">
          {fontStyleOptions.map((option) => (
            <Button
              key={option.value}
              icon={option.icon}
              isPressed={fontStyle__hover[activeDevice] === option.value}
              onClick={() => updateDeviceAttribute('fontStyle__hover', fontStyle__hover[activeDevice] === option.value ? '' : option.value)}
              aria-label={option.label}
              variant={fontStyle__hover[activeDevice] === option.value ? 'primary' : 'secondary'}
            />
          ))}
        </ButtonGroup>
				<ResponsiveInheritedNotice
					values={ fontStyle__hover }
					activeDevice={ activeDevice }
					options={ fontStyleOptions }
				/>
      </div>

      <div className="typography-control__text-align">
        <label className="components-base-control__label">{__('Text Alignment', 'axcelersblocks')}</label>
        <ButtonGroup className="typography-text-align-options">
          {textAlignOptions.map((option) => (
            <Button
              key={option.value}
              icon={option.icon}
              isPressed={textAlign__hover[activeDevice] === option.value}
              onClick={() => updateDeviceAttribute('textAlign__hover', textAlign__hover[activeDevice] === option.value ? '' : option.value)}
              aria-label={option.label}
              variant={textAlign__hover[activeDevice] === option.value ? 'primary' : 'secondary'}
            />
          ))}
        </ButtonGroup>
				<ResponsiveInheritedNotice
					values={ textAlign__hover }
					activeDevice={ activeDevice }
					options={ textAlignOptions }
				/>
      </div>

      <div className="typography-control__text-transform">
        <label className="components-base-control__label">{__('Text Transform', 'axcelersblocks')}</label>
        <ButtonGroup className="typography-text-transform-options">
          {textTransformOptions.map((option) => (
            <Button
              key={option.value}
              icon={option.icon}
              isPressed={textTransform__hover[activeDevice] === option.value}
              onClick={() => updateDeviceAttribute('textTransform__hover', textTransform__hover[activeDevice] === option.value ? '' : option.value)}
              aria-label={option.label}
              variant={textTransform__hover[activeDevice] === option.value ? 'primary' : 'secondary'}
            />
          ))}
        </ButtonGroup>
				<ResponsiveInheritedNotice
					values={ textTransform__hover }
					activeDevice={ activeDevice }
					options={ textTransformOptions }
				/>
      </div>

      <div className="typography-control__text-decoration">
        <label className="components-base-control__label">{__('Text Decoration', 'axcelersblocks')}</label>
        <ButtonGroup className="typography-text-decoration-options">
          {textDecorationOptions.map((option) => (
            <Button
              key={option.value}
              icon={option.icon}
              isPressed={textDecoration__hover[activeDevice] === option.value}
              onClick={() => updateDeviceAttribute('textDecoration__hover', textDecoration__hover[activeDevice] === option.value ? '' : option.value)}
              aria-label={option.label}
              variant={textDecoration__hover[activeDevice] === option.value ? 'primary' : 'secondary'}
            />
          ))}
        </ButtonGroup>
				<ResponsiveInheritedNotice
					values={ textDecoration__hover }
					activeDevice={ activeDevice }
					options={ textDecorationOptions }
				/>
      </div>

      <TextControl
        label={__('Line Height', 'axcelersblocks')}
        value={lineHeight__hover[activeDevice] || ''}
        onChange={(value) => updateDeviceAttribute('lineHeight__hover', value)}
        placeholder={getResponsivePlaceholder({
          values: lineHeight__hover,
          activeDevice,
          fallback: 'e.g., 1.5, 24px',
        })}
        className="typography-control__line-height"
      />

      <UnitValueControl
        label={__('Letter Spacing', 'axcelersblocks')}
        value={letterSpacing__hover[activeDevice] || ''}
        onChange={(value) => updateDeviceAttribute('letterSpacing__hover', value)}
        placeholder={getResponsivePlaceholder({
          values: letterSpacing__hover,
          activeDevice,
          fallback: 'e.g., 2px, 0.1em',
        })}
        preset="letterSpacing"
        className="typography-control__letter-spacing"
      />

      <SelectControl
        label={__('Font Family', 'axcelersblocks')}
        value={fontFamily__hover[activeDevice] || ''}
        options={fontFamilySelectOptions}
        onChange={(value) => updateDeviceAttribute('fontFamily__hover', value)}
        className="typography-control__font-family"
      />
    </>
  );
}
