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 Typography({
  activeDevice,
  textColor,
  fontSize, fontWeight, fontStyle,
  textAlign, textTransform, textDecoration,
  lineHeight, letterSpacing, fontFamily,
  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,
    activeDevice,
    options: fontWeightOptions,
    inheritedLabel: __('Inherited', 'axcelersblocks'),
  });
  const fontFamilySelectOptions = getResponsiveSelectOptions({
    values: fontFamily,
    activeDevice,
    options: fontFamilyOptions,
    inheritedLabel: __('Inherited', 'axcelersblocks'),
  });

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

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

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

      <SelectControl
        label={__('Font Weight', 'axcelersblocks')}
        value={fontWeight[activeDevice] || ''}
        options={fontWeightSelectOptions}
        onChange={(value) => updateDeviceAttribute('fontWeight', 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[activeDevice] === option.value}
              onClick={() => updateDeviceAttribute('fontStyle', fontStyle[activeDevice] === option.value ? '' : option.value)}
              aria-label={option.label}
              variant={fontStyle[activeDevice] === option.value ? 'primary' : 'secondary'}
            />
          ))}
        </ButtonGroup>
				<ResponsiveInheritedNotice
					values={ fontStyle }
					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[activeDevice] === option.value}
              onClick={() => updateDeviceAttribute('textAlign', textAlign[activeDevice] === option.value ? '' : option.value)}
              aria-label={option.label}
              variant={textAlign[activeDevice] === option.value ? 'primary' : 'secondary'}
            />
          ))}
        </ButtonGroup>
				<ResponsiveInheritedNotice
					values={ textAlign }
					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[activeDevice] === option.value}
              onClick={() => updateDeviceAttribute('textTransform', textTransform[activeDevice] === option.value ? '' : option.value)}
              aria-label={option.label}
              variant={textTransform[activeDevice] === option.value ? 'primary' : 'secondary'}
            />
          ))}
        </ButtonGroup>
				<ResponsiveInheritedNotice
					values={ textTransform }
					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[activeDevice] === option.value}
              onClick={() => updateDeviceAttribute('textDecoration', textDecoration[activeDevice] === option.value ? '' : option.value)}
              aria-label={option.label}
              variant={textDecoration[activeDevice] === option.value ? 'primary' : 'secondary'}
            />
          ))}
        </ButtonGroup>
				<ResponsiveInheritedNotice
					values={ textDecoration }
					activeDevice={ activeDevice }
					options={ textDecorationOptions }
				/>
      </div>

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

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