'use client';

import React, { useState } from 'react';
import { useSliderEditor } from './SliderEditorContext';
import MediaLibraryModal from './MediaLibraryModal';
import type { ImageSelection } from '@/types/media';
import styles from './ImageLibraryTab.module.css';

export default function ImageLibraryTab() {
  const { formState, updateSlide } = useSliderEditor();
  const [isModalOpen, setIsModalOpen] = useState(false);

  const handleSelectImage = (image: ImageSelection) => {
    updateSlide(formState.currentSlideIndex, {
      image: {
        url: image.url,
        source: 'library',
      },
    });
    setIsModalOpen(false);
  };

  return (
    <div className={styles.libraryContainer}>
      <button className={styles.openLibraryButton} onClick={() => setIsModalOpen(true)}>
        <svg
          className={styles.libraryIcon}
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          strokeWidth="1.5"
        >
          <rect x="3" y="3" width="18" height="18" rx="2" ry="2" />
          <circle cx="8.5" cy="8.5" r="1.5" />
          <polyline points="21 15 16 10 5 21" />
        </svg>
        <span className={styles.buttonText}>Open Media Library</span>
        <span className={styles.buttonSubtext}>Browse your images or AMSOIL branded images</span>
      </button>

      <MediaLibraryModal
        isOpen={isModalOpen}
        onClose={() => setIsModalOpen(false)}
        onSelect={handleSelectImage}
        context="slider"
      />
    </div>
  );
}