/**
 * TooltipSettingsSectionCompact
 *
 * Compact tooltip element settings for constructor sidebar.
 * Icon, title, and text fields.
 */

import React from 'react';
import type { AssetOption } from '../../types/constructor';
import { addFallbackAssetOption } from '../../lib/constructorHelpers';
import { FONT_OPTIONS } from '../../lib/fonts';

interface TooltipSettingsSectionCompactProps {
  iconUrl: string;
  tooltipTitle: string;
  tooltipText: string;
  tooltipTitleFontFamily: string;
  tooltipTextFontFamily: string;
  iconAssetOptions: AssetOption[];
  onChange: (prop: string, value: string) => void;
}

const TooltipSettingsSectionCompact: React.FC<
  TooltipSettingsSectionCompactProps
> = ({
  iconUrl,
  tooltipTitle,
  tooltipText,
  tooltipTitleFontFamily,
  tooltipTextFontFamily,
  iconAssetOptions,
  onChange,
}) => {
  return (
    <div className='space-y-2'>
      <div>
        <label className='mb-1 block text-[11px] font-semibold text-gray-600'>
          Icon
        </label>
        <select
          className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
          value={iconUrl}
          onChange={(event) => onChange('iconUrl', event.target.value)}
        >
          <option value=''>Not selected</option>
          {addFallbackAssetOption(
            iconAssetOptions,
            iconUrl,
            `Current icon · ${iconUrl}`,
          ).map((option) => (
            <option key={option.value} value={option.value}>
              {option.label}
            </option>
          ))}
        </select>
      </div>

      <div>
        <label className='mb-1 block text-[11px] font-semibold text-gray-600'>
          Tooltip title
        </label>
        <input
          className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
          value={tooltipTitle}
          onChange={(event) => onChange('tooltipTitle', event.target.value)}
        />
      </div>

      <div>
        <label className='mb-1 block text-[11px] font-semibold text-gray-600'>
          Tooltip text
        </label>
        <textarea
          className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
          rows={4}
          value={tooltipText}
          onChange={(event) => onChange('tooltipText', event.target.value)}
        />
      </div>

      <div>
        <label className='mb-1 block text-[11px] font-semibold text-gray-600'>
          Title font family
        </label>
        <select
          className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
          value={tooltipTitleFontFamily}
          onChange={(event) =>
            onChange('tooltipTitleFontFamily', event.target.value)
          }
        >
          <option value=''>Not set</option>
          {FONT_OPTIONS.map((font) => (
            <option key={font.key} value={font.key}>
              {font.label}
            </option>
          ))}
        </select>
      </div>

      <div>
        <label className='mb-1 block text-[11px] font-semibold text-gray-600'>
          Text font family
        </label>
        <select
          className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
          value={tooltipTextFontFamily}
          onChange={(event) =>
            onChange('tooltipTextFontFamily', event.target.value)
          }
        >
          <option value=''>Not set</option>
          {FONT_OPTIONS.map((font) => (
            <option key={font.key} value={font.key}>
              {font.label}
            </option>
          ))}
        </select>
      </div>
    </div>
  );
};

export default TooltipSettingsSectionCompact;