/**
 * NavigationSettingsSection
 *
 * Settings for navigation_next and navigation_prev element types.
 */

import React from 'react';
import FormField from '../FormField';
import type { NavigationSettingsSectionProps } from './types';
import { FONT_OPTIONS } from '../../lib/fonts';

const NavigationSettingsSection: React.FC<NavigationSettingsSectionProps> = ({
  iconUrl,
  navLabel,
  navLabelFontFamily,
  navType,
  navDisabled,
  targetPageId,
  targetPageSlug,
  transitionVideoUrl,
  transitionReverseMode,
  reverseVideoUrl,
  onChange,
  context,
  iconAssetOptions = [],
  transitionVideoAssetOptions = [],
  pageOptions = [],
}) => {
  const isConstructor = context === 'constructor';
  const isGlobal = context === 'global';
  const isProject = context === 'project';

  return (
    <div className='space-y-4'>
      {/* Icon: asset selector for constructor/project, text input for global */}
      {isConstructor || isProject ? (
        <FormField label='Icon'>
          <select
            value={iconUrl}
            onChange={(event) => onChange('iconUrl', event.target.value)}
          >
            <option value=''>Not selected</option>
            {iconAssetOptions.map((option) => (
              <option key={option.value} value={option.value}>
                {option.label}
              </option>
            ))}
          </select>
        </FormField>
      ) : (
        <FormField label='Icon URL'>
          <input
            value={iconUrl}
            onChange={(event) => onChange('iconUrl', event.target.value)}
          />
        </FormField>
      )}

      {/* Instance-specific fields only shown for constructor */}
      {isConstructor && (
        <>
          <FormField label='Navigation label'>
            <input
              value={navLabel}
              onChange={(event) => onChange('navLabel', event.target.value)}
            />
          </FormField>

          <FormField label='Label font family'>
            <select
              value={navLabelFontFamily}
              onChange={(event) =>
                onChange('navLabelFontFamily', event.target.value)
              }
            >
              <option value=''>Not set</option>
              {FONT_OPTIONS.map((font) => (
                <option key={font.key} value={font.key}>
                  {font.label}
                </option>
              ))}
            </select>
          </FormField>

          <FormField label='Navigation type'>
            <select
              value={navType}
              onChange={(event) => onChange('navType', event.target.value)}
            >
              <option value='forward'>Forward</option>
              <option value='back'>Back</option>
            </select>
          </FormField>
        </>
      )}

      {/* Disabled checkbox only shown for constructor */}
      {isConstructor && (
        <FormField label='Disabled'>
          <label className='inline-flex items-center gap-2 text-sm'>
            <input
              type='checkbox'
              checked={navDisabled}
              onChange={(event) =>
                onChange('navDisabled', event.target.checked)
              }
            />
            Button is disabled (not clickable)
          </label>
        </FormField>
      )}

      {/* Target page only shown for constructor */}
      {isConstructor && (
        <>
          {pageOptions.length > 0 ? (
            <FormField label='Target page'>
              <select
                value={targetPageSlug}
                onChange={(event) =>
                  onChange('targetPageSlug', event.target.value)
                }
              >
                <option value=''>Not selected</option>
                {pageOptions.map((option) => (
                  <option key={option.value} value={option.value}>
                    {option.label}
                  </option>
                ))}
              </select>
            </FormField>
          ) : (
            <FormField label='Target page ID (optional)'>
              <input
                value={targetPageId}
                onChange={(event) =>
                  onChange('targetPageId', event.target.value)
                }
              />
            </FormField>
          )}
        </>
      )}

      {/* Transition settings only shown for constructor */}
      {isConstructor && (
        <>
          <FormField label='Transition video asset'>
            <select
              value={transitionVideoUrl}
              onChange={(event) =>
                onChange('transitionVideoUrl', event.target.value)
              }
            >
              <option value=''>Not selected</option>
              {transitionVideoAssetOptions.map((option) => (
                <option key={option.value} value={option.value}>
                  {option.label}
                </option>
              ))}
            </select>
          </FormField>

          <FormField label='Reverse mode'>
            <select
              value={transitionReverseMode}
              onChange={(event) =>
                onChange('transitionReverseMode', event.target.value)
              }
            >
              <option value='auto_reverse'>Auto reverse</option>
              <option value='separate_video'>Separate reverse video</option>
            </select>
          </FormField>

          {transitionReverseMode === 'separate_video' && (
            <FormField label='Reverse video asset'>
              <select
                value={reverseVideoUrl}
                onChange={(event) =>
                  onChange('reverseVideoUrl', event.target.value)
                }
              >
                <option value=''>Not selected</option>
                {transitionVideoAssetOptions.map((option) => (
                  <option key={option.value} value={option.value}>
                    {option.label}
                  </option>
                ))}
              </select>
            </FormField>
          )}
        </>
      )}
    </div>
  );
};

export default NavigationSettingsSection;
