import dynamic from 'next/dynamic';
import 'react-quill/dist/quill.snow.css';

const ReactQuill = dynamic(() => import('react-quill'), { ssr: false });

export default function WisiwigTextArea({
  label = 'Zone de Texte',
  value,
  onChange,
  placeholder = 'Ecrivez votre texte ici...',
  className = 'h-64',
  required = false,
  errorMsg,
  errorLocalMsg,
  enable = true,
}) {
  return (
    <div className={`mb-4 ${className}`}>
      <label className="block text-sm font-medium text-gray-700">
        {label}
        {required && <span className="text-red-500 ml-1">*</span>}
      </label>
      <div
        className={`
          mt-1 border rounded-md
          ${
            errorMsg || errorLocalMsg
              ? 'border-red-500 hover:border-red-700'
              : 'border-gray-200 hover:border-gray-400'
          }
          ${!errorMsg && !errorLocalMsg ? 'focus-within:border-gray-500' : ''}
          ${!enable ? 'bg-gray-100 cursor-not-allowed' : ''}
        `}
      >
        <ReactQuill
          theme="snow"
          value={value}
          onChange={enable ? onChange : undefined}
          placeholder={placeholder}
          readOnly={!enable}
          className={`bg-white rounded-md border-0 shadow-none !border-0 !outline-none ${!enable ? 'bg-gray-100 cursor-not-allowed' : ''}`}
          style={{ minHeight: 250, border: 'none', boxShadow: 'none' }}
        />
      </div>
      {errorMsg && <p className="mt-2 text-sm text-red-600">{errorMsg}</p>}
      {errorLocalMsg && (
        <p className="mt-2 text-sm text-red-600">{errorLocalMsg}</p>
      )}
      <style jsx global>{`
        .ql-toolbar.ql-snow {
          border: none !important;
          border-bottom: 1px solid #e5e7eb !important; /* gray-200 */
          border-radius: 0.375rem 0.375rem 0 0 !important; /* rounded-t-md */
        }
        .ql-container.ql-snow {
          border: none !important;
        }
      `}</style>
    </div>
  );
}