import React, { useState, useEffect } from 'react';

import { apiUrl } from '@/config/api';
import { CertEditor } from '../Editors/CertEditor'

const isValidImage = (file) => {
  const allowedTypes = ['image/jpeg', 'image/jpg', 'image/png'];
  if (allowedTypes.includes(file.type)) return true;

  const ext = file.name.split('.').pop().toLowerCase();
  return ['jpg', 'jpeg', 'png'].includes(ext);
};

export function PortfolioForm({ initPortfolios, onChange }) {
  const [initialPortfolios, setInitialPorfolios] = useState([]);
  const [portfolios, setPortfolios] = useState([]);

  useEffect(() => {
    // console.log(initPortfolios)
    const portfolioWithPictureUrl = initPortfolios.map((init) => {
      if ( init.picture ) return ({ ...init, picture: apiUrl(`/uploads/${init.picture}`)})
      return { ...init }
    })
    setInitialPorfolios([...portfolioWithPictureUrl])
    setPortfolios([...portfolioWithPictureUrl])
  }, [initPortfolios])

    useEffect(() => {
    if (typeof onChange === 'function') {
      onChange(portfolios);
    }
  }, [portfolios, onChange]);

  const updateField = (idx, field, value) => {
    setPortfolios(prev =>
      prev.map((cert, i) =>
        i === idx
          ? { ...cert, [field]: value }
          : cert
      )
    );
  };

  const replaceImage = (e, idx) => {
    const file = e.target.files[0];
    if (!file) return;
    if (!isValidImage(file)) {
      return window.alert('Изображения должны быть только формата JPG, JPEG или PNG');
    }
    const url = window.URL.createObjectURL(file);
    setPortfolios(prev =>
      prev.map((cert, i) =>
        i === idx
          ? { ...cert, picture: url, _file: file }
          : cert
      )
    );
    // console.log('==================')
    // console.log(file)
  };

  const addCertificate = () => {
    setPortfolios(prev => [
      ...prev,
      { name: '', description: '', picture: '', type: 'portfolio', active: false }
    ]);
  };

  const deleteCertificate = idx => {
    setPortfolios(prev => prev.filter((_, i) => i !== idx));
  };

  return (
    <>
      {portfolios.map((cert, idx) => (
        <div className="card mb-3 p-3" key={idx}>
          <div className="form-group">
            <label>Название</label>
            <input
              className="form-control"
              value={cert.name}
              onChange={e => updateField(idx, 'name', e.target.value)}
            />
          </div>

        <div className='d-flex' style={{gap: '2rem'}}>
          <div className="form-group flex-grow-1">
            <label>Описание</label>
            <CertEditor
              content={cert.description}
              setContent={newVal => updateField(idx, 'description', newVal)}
            />
          </div>
          <div>
            <div className="form-check mb-3">
        <input
          id={`active-port${idx}`}
          type="checkbox"
          className="form-check-input"
          checked={ cert.active }
          onChange={e => updateField(idx, 'active', e.target.checked)}
        />
        <label htmlFor={`active-port${idx}`} className="form-check-label">
          Отображать на сайте
        </label>
      </div>
      <div className="form-group d-flex flex-column align-items-center" style={{ gap: '1rem' }}>
            <label
              htmlFor={`file-port-${idx}`}
              className="btn btn-outline-primary"
              style={{ cursor: 'pointer', height: '2.5rem', width: '13rem' }}
            >
              Загрузить фото
            </label>
            <input
              id={`file-port-${idx}`}
              type="file"
              accept="image/*"
              style={{ display: 'none' }}
              onChange={e => replaceImage(e, idx)}
            />
            {cert.picture && (
              <img
                src={cert.picture}
                alt="Портфолио"
                style={{ width: '10rem', height: '10rem', objectFit: 'cover', borderRadius: '4px' }}
                onError={e => e.currentTarget.src = '/placeholder.png'}
              />
            )}
          </div>
          </div>
        </div>
          <div className='d-flex justify-content-start'>
            <button
            className="btn btn-danger"
            onClick={() => deleteCertificate(idx)}
          >
            Удалить
          </button>
          </div>
        </div>
      ))} 

      <button
        className="btn btn-outline-primary mb-3"
        onClick={addCertificate}
      >
        Добавить запись
      </button>
    </>
  );
}