import MDEditor from '@uiw/react-md-editor'
import React from 'react'
import rehypeSanitize from 'rehype-sanitize'
import '../styles/styles.css'

interface InputFieldProps {
  label: string
  description?: string
  type?: 'text' | 'textarea' | 'richtext'
  placeholder: string
  name: string
  inputMode?: 'url'
  value: string
  error?: string
  onChange: (name: string, value: string) => void
}

export const InputField = React.memo(
  ({
    label,
    description,
    type = 'text',
    placeholder,
    name,
    inputMode,
    value,
    error,
    onChange
  }: InputFieldProps) => {
    const handleChange = (
      e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
    ) => {
      onChange(name, e.target.value)
    }

    return (
      <div className='inputLabelWrapperMain'>
        <label className='form-label labelMain'>{label}</label>
        {description && <p className='labelDescriptionMain'>{description}</p>}
        {type === 'textarea' ? (
          <textarea
            className='inputMain'
            placeholder={placeholder}
            name={name}
            value={value}
            onChange={handleChange}
          ></textarea>
        ) : type === 'richtext' ? (
          <MDEditor
            value={value}
            onChange={(content) => onChange(name, content || '')}
            previewOptions={{
              rehypePlugins: [[rehypeSanitize]]
            }}
            preview='edit'
          />
        ) : (
          <input
            type={type}
            className='inputMain'
            placeholder={placeholder}
            name={name}
            inputMode={inputMode}
            value={value}
            onChange={handleChange}
          />
        )}
        {error && <InputError message={error} />}
      </div>
    )
  }
)

type InputErrorProps = {
  message: string
}

export const InputError = ({ message }: InputErrorProps) => {
  if (!message) return null

  return (
    <div className='errorMain'>
      <div className='errorMainColor'></div>
      <p className='errorMainText'>{message}</p>
    </div>
  )
}

interface CheckboxFieldProps {
  label: string
  name: string
  isChecked: boolean
  handleChange: (e: React.ChangeEvent<HTMLInputElement>) => void
}

export const CheckboxField = React.memo(
  ({ label, name, isChecked, handleChange }: CheckboxFieldProps) => (
    <div className='inputLabelWrapperMain inputLabelWrapperMainAlt inputLabelWrapperMainAltStylized'>
      <label className='form-label labelMain'>{label}</label>
      <input
        type='checkbox'
        className='CheckboxMain'
        name={name}
        checked={isChecked}
        onChange={handleChange}
      />
    </div>
  )
)