import { __ } from '@wordpress/i18n';
import { PanelBody, Button, SelectControl } from '@wordpress/components';
import { useDevice } from '../../../components/controls/DeviceContext';
import UnitValueControl from '../../../components/controls/UnitValueControl';
import { getResponsivePlaceholder } from '../../../components/controls/responsiveValueUtils';
import AspectRatioIcon from '../../../components/style-controls/icons/AspectRatio';

/**
 * Sizing, object-fit/position and border-radius controls that target the
 * <video> element (not the <figure> wrapper).
 */
export function VideoSizingControl( { attributes, setAttributes } ) {
  const { activeDevice } = useDevice();

  const videoWidth        = attributes.videoWidth        || { desktop: '', tablet: '', mobile: '' };
  const videoHeight       = attributes.videoHeight       || { desktop: '', tablet: '', mobile: '' };
  const videoMinWidth     = attributes.videoMinWidth     || { desktop: '', tablet: '', mobile: '' };
  const videoMinHeight    = attributes.videoMinHeight    || { desktop: '', tablet: '', mobile: '' };
  const videoMaxWidth     = attributes.videoMaxWidth     || { desktop: '', tablet: '', mobile: '' };
  const videoMaxHeight    = attributes.videoMaxHeight    || { desktop: '', tablet: '', mobile: '' };
  const videoBorderRadius = attributes.videoBorderRadius || { desktop: '', tablet: '', mobile: '' };
  const objectFit         = attributes.videoObjectFit?.[ activeDevice ] ?? '';
  const objectPosition    = attributes.videoObjectPosition?.[ activeDevice ] ?? '';

  const set = ( attr, value ) =>
    setAttributes( { [ attr ]: { ...( attributes[ attr ] || {} ), [ activeDevice ]: value } } );

  const reset = () =>
    setAttributes( {
      videoWidth:          { ...videoWidth,        [ activeDevice ]: '' },
      videoHeight:         { ...videoHeight,       [ activeDevice ]: '' },
      videoMinWidth:       { ...videoMinWidth,     [ activeDevice ]: '' },
      videoMinHeight:      { ...videoMinHeight,    [ activeDevice ]: '' },
      videoMaxWidth:       { ...videoMaxWidth,     [ activeDevice ]: '' },
      videoMaxHeight:      { ...videoMaxHeight,    [ activeDevice ]: '' },
      videoBorderRadius:   { ...videoBorderRadius, [ activeDevice ]: '' },
      videoObjectFit:      { ...( attributes.videoObjectFit || {} ),      [ activeDevice ]: '' },
      videoObjectPosition: { ...( attributes.videoObjectPosition || {} ), [ activeDevice ]: '' },
    } );

  return (
    <PanelBody
      className="sizing-controls-wrapper"
      title={
        <span className="title">
          <AspectRatioIcon />
          { __( 'Video Sizing', 'axcelersblocks' ) }
        </span>
      }
      initialOpen={ true }
    >
      <div className="two-columns-layout">
        <UnitValueControl
          label={ __( 'Width', 'axcelersblocks' ) }
          value={ videoWidth[ activeDevice ] || '' }
          onChange={ ( v ) => set( 'videoWidth', v ) }
          placeholder={ getResponsivePlaceholder( { values: videoWidth, activeDevice, fallback: 'e.g., 100%, auto' } ) }
          preset="size"
        />
        <UnitValueControl
          label={ __( 'Height', 'axcelersblocks' ) }
          value={ videoHeight[ activeDevice ] || '' }
          onChange={ ( v ) => set( 'videoHeight', v ) }
          placeholder={ getResponsivePlaceholder( { values: videoHeight, activeDevice, fallback: 'e.g., auto, 360px' } ) }
          preset="size"
        />
      </div>

      <div className="two-columns-layout">
        <UnitValueControl
          label={ __( 'Min Width', 'axcelersblocks' ) }
          value={ videoMinWidth[ activeDevice ] || '' }
          onChange={ ( v ) => set( 'videoMinWidth', v ) }
          placeholder={ getResponsivePlaceholder( { values: videoMinWidth, activeDevice, fallback: '' } ) }
          preset="minSize"
        />
        <UnitValueControl
          label={ __( 'Min Height', 'axcelersblocks' ) }
          value={ videoMinHeight[ activeDevice ] || '' }
          onChange={ ( v ) => set( 'videoMinHeight', v ) }
          placeholder={ getResponsivePlaceholder( { values: videoMinHeight, activeDevice, fallback: '' } ) }
          preset="minSize"
        />
      </div>

      <div className="two-columns-layout">
        <UnitValueControl
          label={ __( 'Max Width', 'axcelersblocks' ) }
          value={ videoMaxWidth[ activeDevice ] || '' }
          onChange={ ( v ) => set( 'videoMaxWidth', v ) }
          placeholder={ getResponsivePlaceholder( { values: videoMaxWidth, activeDevice, fallback: '' } ) }
          preset="maxSize"
        />
        <UnitValueControl
          label={ __( 'Max Height', 'axcelersblocks' ) }
          value={ videoMaxHeight[ activeDevice ] || '' }
          onChange={ ( v ) => set( 'videoMaxHeight', v ) }
          placeholder={ getResponsivePlaceholder( { values: videoMaxHeight, activeDevice, fallback: '' } ) }
          preset="maxSize"
        />
      </div>

      <UnitValueControl
        label={ __( 'Border Radius', 'axcelersblocks' ) }
        value={ videoBorderRadius[ activeDevice ] || '' }
        onChange={ ( v ) => set( 'videoBorderRadius', v ) }
        placeholder={ getResponsivePlaceholder( { values: videoBorderRadius, activeDevice, fallback: 'e.g., 8px, 50%' } ) }
        preset="size"
      />

      <SelectControl
        label={ __( 'Object Fit', 'axcelersblocks' ) }
        value={ objectFit }
        onChange={ ( v ) => set( 'videoObjectFit', v || '' ) }
        options={ [
          { label: __( 'Default', 'axcelersblocks' ), value: '' },
          { label: 'cover', value: 'cover' },
          { label: 'contain', value: 'contain' },
          { label: 'fill', value: 'fill' },
          { label: 'none', value: 'none' },
          { label: 'scale-down', value: 'scale-down' },
        ] }
      />

      <SelectControl
        label={ __( 'Object Position', 'axcelersblocks' ) }
        value={ objectPosition }
        onChange={ ( v ) => set( 'videoObjectPosition', v || '' ) }
        options={ [
          { label: __( 'Default', 'axcelersblocks' ), value: '' },
          { label: __( 'Center', 'axcelersblocks' ), value: '50% 50%' },
          { label: __( 'Top', 'axcelersblocks' ), value: '50% 0%' },
          { label: __( 'Bottom', 'axcelersblocks' ), value: '50% 100%' },
          { label: __( 'Left', 'axcelersblocks' ), value: '0% 50%' },
          { label: __( 'Right', 'axcelersblocks' ), value: '100% 50%' },
          { label: __( 'Top Left', 'axcelersblocks' ), value: '0% 0%' },
          { label: __( 'Top Right', 'axcelersblocks' ), value: '100% 0%' },
          { label: __( 'Bottom Left', 'axcelersblocks' ), value: '0% 100%' },
          { label: __( 'Bottom Right', 'axcelersblocks' ), value: '100% 100%' },
        ] }
      />

      <Button className="reset-btn" onClick={ reset } label={ __( 'Reset', 'axcelersblocks' ) } showTooltip={ true }>
        { __( 'Reset', 'axcelersblocks' ) }
      </Button>
    </PanelBody>
  );
}
