/**
 * EffectsSettingsSection
 *
 * Animation and interaction effect settings for UI elements.
 * Used in element-type-defaults, project-element-defaults, and constructor pages.
 */

import React from 'react';
import FormField from '../FormField';
import type { EffectsSettingsSectionProps } from './types';

const EffectsSettingsSection: React.FC<EffectsSettingsSectionProps> = ({
  values,
  onChange,
}) => {
  return (
    <div className='space-y-6'>
      {/* Appear Animation */}
      <div>
        <h4 className='text-sm font-semibold mb-3'>Appear Animation</h4>
        <p className='text-xs text-gray-500 mb-3'>
          Animation played when the element appears on screen.
        </p>
        <div className='grid gap-3 md:grid-cols-3'>
          <FormField label='Animation type'>
            <select
              value={values.appearAnimation || ''}
              onChange={(e) => onChange('appearAnimation', e.target.value)}
            >
              <option value=''>None</option>
              <option value='fade'>Fade</option>
              <option value='slide-up'>Slide Up</option>
              <option value='slide-down'>Slide Down</option>
              <option value='slide-left'>Slide Left</option>
              <option value='slide-right'>Slide Right</option>
              <option value='scale'>Scale</option>
            </select>
          </FormField>
          <FormField label='Duration (sec)'>
            <input
              value={values.appearAnimationDuration || ''}
              onChange={(e) =>
                onChange('appearAnimationDuration', e.target.value)
              }
              placeholder='e.g. 0.3'
            />
          </FormField>
          <FormField label='Easing'>
            <select
              value={values.appearAnimationEasing || ''}
              onChange={(e) =>
                onChange('appearAnimationEasing', e.target.value)
              }
            >
              <option value=''>Default (ease)</option>
              <option value='linear'>Linear</option>
              <option value='ease'>Ease</option>
              <option value='ease-in'>Ease In</option>
              <option value='ease-out'>Ease Out</option>
              <option value='ease-in-out'>Ease In-Out</option>
            </select>
          </FormField>
        </div>
      </div>

      {/* Hover Effects */}
      <div>
        <h4 className='text-sm font-semibold mb-3'>Hover Effects</h4>
        <p className='text-xs text-gray-500 mb-3'>
          Visual changes when hovering over the element.
        </p>
        <div className='grid gap-3 md:grid-cols-2'>
          <FormField label='Scale'>
            <input
              value={values.hoverScale || ''}
              onChange={(e) => onChange('hoverScale', e.target.value)}
              placeholder='e.g. 1.05'
            />
          </FormField>
          <FormField label='Opacity'>
            <input
              value={values.hoverOpacity || ''}
              onChange={(e) => onChange('hoverOpacity', e.target.value)}
              placeholder='0..1'
            />
          </FormField>
          <FormField label='Background color'>
            <input
              value={values.hoverBackgroundColor || ''}
              onChange={(e) => onChange('hoverBackgroundColor', e.target.value)}
              placeholder='e.g. #B39368'
            />
          </FormField>
          <FormField label='Text color'>
            <input
              value={values.hoverColor || ''}
              onChange={(e) => onChange('hoverColor', e.target.value)}
              placeholder='e.g. #FFFFFF'
            />
          </FormField>
          <FormField label='Box shadow'>
            <input
              value={values.hoverBoxShadow || ''}
              onChange={(e) => onChange('hoverBoxShadow', e.target.value)}
              placeholder='e.g. 0 4px 12px rgba(...)'
            />
          </FormField>
          <FormField label='Transition duration (sec)'>
            <input
              value={values.hoverTransitionDuration || ''}
              onChange={(e) =>
                onChange('hoverTransitionDuration', e.target.value)
              }
              placeholder='e.g. 0.2'
            />
          </FormField>
        </div>
      </div>

      {/* Focus Effects */}
      <div>
        <h4 className='text-sm font-semibold mb-3'>Focus Effects</h4>
        <p className='text-xs text-gray-500 mb-3'>
          Visual changes when the element receives keyboard focus.
        </p>
        <div className='grid gap-3 md:grid-cols-2'>
          <FormField label='Scale'>
            <input
              value={values.focusScale || ''}
              onChange={(e) => onChange('focusScale', e.target.value)}
              placeholder='e.g. 1.02'
            />
          </FormField>
          <FormField label='Outline'>
            <input
              value={values.focusOutline || ''}
              onChange={(e) => onChange('focusOutline', e.target.value)}
              placeholder='e.g. 2px solid #B39368'
            />
          </FormField>
          <FormField label='Box shadow'>
            <input
              value={values.focusBoxShadow || ''}
              onChange={(e) => onChange('focusBoxShadow', e.target.value)}
              placeholder='e.g. 0 0 0 3px rgba(...)'
            />
          </FormField>
          <FormField label='Opacity'>
            <input
              value={values.focusOpacity || ''}
              onChange={(e) => onChange('focusOpacity', e.target.value)}
              placeholder='0..1'
            />
          </FormField>
        </div>
      </div>

      {/* Active/Press Effects */}
      <div>
        <h4 className='text-sm font-semibold mb-3'>Active/Press Effects</h4>
        <p className='text-xs text-gray-500 mb-3'>
          Visual changes when the element is clicked or pressed.
        </p>
        <div className='grid gap-3 md:grid-cols-2'>
          <FormField label='Scale'>
            <input
              value={values.activeScale || ''}
              onChange={(e) => onChange('activeScale', e.target.value)}
              placeholder='e.g. 0.95'
            />
          </FormField>
          <FormField label='Opacity'>
            <input
              value={values.activeOpacity || ''}
              onChange={(e) => onChange('activeOpacity', e.target.value)}
              placeholder='0..1'
            />
          </FormField>
          <FormField label='Background color'>
            <input
              value={values.activeBackgroundColor || ''}
              onChange={(e) =>
                onChange('activeBackgroundColor', e.target.value)
              }
              placeholder='e.g. #131C22'
            />
          </FormField>
        </div>
      </div>
    </div>
  );
};

export default EffectsSettingsSection;
