/**
 * TooltipSettingsSection
 *
 * Settings for tooltip element type.
 */

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

const TooltipSettingsSection: React.FC<TooltipSettingsSectionProps> = ({
  iconUrl,
  tooltipTitle,
  tooltipText,
  tooltipTitleFontFamily,
  tooltipTextFontFamily,
  onChange,
  context,
  iconAssetOptions = [],
}) => {
  const isConstructor = context === 'constructor';

  return (
    <div className='space-y-4'>
      {isConstructor ? (
        <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>
      )}

      <FormField label='Tooltip title'>
        <input
          value={tooltipTitle}
          onChange={(event) => onChange('tooltipTitle', event.target.value)}
        />
      </FormField>

      <FormField label='Tooltip text' hasTextareaHeight>
        <textarea
          value={tooltipText}
          onChange={(event) => onChange('tooltipText', event.target.value)}
          className='h-28 w-full rounded border border-gray-300 p-2 dark:border-dark-700 dark:bg-dark-900'
        />
      </FormField>

      <div className='grid gap-3 md:grid-cols-2'>
        <FormField label='Title font family'>
          <select
            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>
        </FormField>
        <FormField label='Text font family'>
          <select
            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>
        </FormField>
      </div>
    </div>
  );
};

export default TooltipSettingsSection;
