/**
 * DescriptionSettingsSection
 *
 * Settings for description element type.
 */

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

const DescriptionSettingsSection: React.FC<DescriptionSettingsSectionProps> = ({
  iconUrl,
  descriptionTitle,
  descriptionText,
  descriptionTitleFontSize,
  descriptionTextFontSize,
  descriptionTitleFontFamily,
  descriptionTextFontFamily,
  descriptionTitleColor,
  descriptionTextColor,
  descriptionBackgroundColor,
  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='Description title'>
        <input
          value={descriptionTitle}
          onChange={(event) => onChange('descriptionTitle', event.target.value)}
        />
      </FormField>

      <FormField label='Description text' hasTextareaHeight>
        <textarea
          value={descriptionText}
          onChange={(event) => onChange('descriptionText', 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 size'>
          <input
            value={descriptionTitleFontSize}
            onChange={(event) =>
              onChange('descriptionTitleFontSize', event.target.value)
            }
            placeholder='e.g. 48px'
          />
        </FormField>
        <FormField label='Text font size'>
          <input
            value={descriptionTextFontSize}
            onChange={(event) =>
              onChange('descriptionTextFontSize', event.target.value)
            }
            placeholder='e.g. 36px'
          />
        </FormField>
        <FormField label='Title font family'>
          <input
            value={descriptionTitleFontFamily}
            onChange={(event) =>
              onChange('descriptionTitleFontFamily', event.target.value)
            }
            placeholder='e.g. Arial, sans-serif'
          />
        </FormField>
        <FormField label='Text font family'>
          <input
            value={descriptionTextFontFamily}
            onChange={(event) =>
              onChange('descriptionTextFontFamily', event.target.value)
            }
            placeholder='e.g. Arial, sans-serif'
          />
        </FormField>
        <FormField label='Title color'>
          <input
            type='color'
            value={descriptionTitleColor || '#000000'}
            onChange={(event) =>
              onChange('descriptionTitleColor', event.target.value)
            }
            className='h-10 w-full'
          />
        </FormField>
        <FormField label='Text color'>
          <input
            type='color'
            value={descriptionTextColor || '#4B5563'}
            onChange={(event) =>
              onChange('descriptionTextColor', event.target.value)
            }
            className='h-10 w-full'
          />
        </FormField>
        <FormField label='Background color'>
          <input
            value={descriptionBackgroundColor}
            onChange={(event) =>
              onChange('descriptionBackgroundColor', event.target.value)
            }
            placeholder='e.g. transparent, #ffffff'
          />
        </FormField>
      </div>
    </div>
  );
};

export default DescriptionSettingsSection;