/**
 * 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';

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

  return (
    <CardBox className='border border-gray-200 dark:border-dark-700'>
      <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'>
                {isConstructor ? (
                  <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='Image URL'>
                    <input
                      value={card.imageUrl}
                      onChange={(event) =>
                        onUpdateCard(card.id, 'imageUrl', event.target.value)
                      }
                    />
                  </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;