/**
 * GallerySettingsSection
 *
 * Settings for gallery element type.
 * Manages gallery cards with images, titles, and descriptions.
 */

import React from 'react';
import { mdiPlus, mdiTrashCan } from '@mdi/js';
import BaseButton from '../BaseButton';
import CardBox from '../CardBox';
import FormField from '../FormField';
import type { GallerySettingsSectionProps } from './types';
import { FONT_OPTIONS } from '../../lib/fonts';

const GallerySettingsSection: React.FC<GallerySettingsSectionProps> = ({
  galleryCards,
  galleryTitleFontFamily,
  galleryTextFontFamily,
  onAddCard,
  onRemoveCard,
  onUpdateCard,
  onChange,
  context,
  imageAssetOptions = [],
}) => {
  const isConstructor = context === 'constructor';

  return (
    <CardBox className='border border-gray-200 dark:border-dark-700'>
      <h3 className='mb-3 text-sm font-semibold'>Gallery settings</h3>

      <div className='mb-4 grid gap-3 md:grid-cols-2'>
        <FormField label='Title font family'>
          <select
            value={galleryTitleFontFamily}
            onChange={(event) =>
              onChange('galleryTitleFontFamily', 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={galleryTextFontFamily}
            onChange={(event) =>
              onChange('galleryTextFontFamily', 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>

      {/* Cards editor only shown in constructor - cards are instance-specific */}
      {isConstructor && (
        <>
          <div className='mb-3 flex items-center justify-between'>
            <h3 className='text-sm font-semibold'>Gallery cards</h3>
            <BaseButton
              color='info'
              icon={mdiPlus}
              small
              label='Add card'
              onClick={onAddCard}
            />
          </div>

          <div className='space-y-4'>
            {galleryCards.length === 0 ? (
              <p className='text-sm text-gray-500'>No cards yet.</p>
            ) : (
              galleryCards.map((card, index) => (
                <CardBox
                  key={card.id}
                  className='border border-gray-200 dark:border-dark-700'
                >
                  <div className='mb-3 flex items-center justify-between'>
                    <h4 className='text-sm font-semibold'>Card {index + 1}</h4>
                    <BaseButton
                      color='danger'
                      icon={mdiTrashCan}
                      small
                      outline
                      onClick={() => onRemoveCard(card.id)}
                    />
                  </div>
                  <div className='grid gap-3 md:grid-cols-2'>
                    <FormField label='Image'>
                      <select
                        value={card.imageUrl}
                        onChange={(event) =>
                          onUpdateCard(card.id, 'imageUrl', event.target.value)
                        }
                      >
                        <option value=''>Not selected</option>
                        {imageAssetOptions.map((option) => (
                          <option key={option.value} value={option.value}>
                            {option.label}
                          </option>
                        ))}
                      </select>
                    </FormField>
                    <FormField label='Title'>
                      <input
                        value={card.title}
                        onChange={(event) =>
                          onUpdateCard(card.id, 'title', event.target.value)
                        }
                      />
                    </FormField>
                    <div className='md:col-span-2'>
                      <FormField label='Description' hasTextareaHeight>
                        <textarea
                          value={card.description}
                          onChange={(event) =>
                            onUpdateCard(
                              card.id,
                              'description',
                              event.target.value,
                            )
                          }
                          className='h-24 w-full rounded border border-gray-300 p-2 dark:border-dark-700 dark:bg-dark-900'
                        />
                      </FormField>
                    </div>
                  </div>
                </CardBox>
              ))
            )}
          </div>
        </>
      )}
    </CardBox>
  );
};

export default GallerySettingsSection;
