'use client'

import { useField } from '@payloadcms/ui'

function TextInput({ path, label }: { path: string; label: string }) {
  const { value, setValue } = useField<string>({ path })
  return (
    <div className="rebours-admin-settings__field">
      <label>{label}</label>
      <input
        type="text"
        value={value ?? ''}
        onChange={(e) => setValue(e.target.value)}
      />
    </div>
  )
}

function TextAreaInput({ path, label }: { path: string; label: string }) {
  const { value, setValue } = useField<string>({ path })
  return (
    <div className="rebours-admin-settings__field">
      <label>{label}</label>
      <textarea
        rows={3}
        value={value ?? ''}
        onChange={(e) => setValue(e.target.value)}
      />
    </div>
  )
}

function NumberInput({ path, label }: { path: string; label: string }) {
  const { value, setValue } = useField<number | null>({ path })
  return (
    <div className="rebours-admin-settings__field">
      <label>{label}</label>
      <input
        type="number"
        value={value ?? ''}
        onChange={(e) => setValue(e.target.value === '' ? null : parseInt(e.target.value, 10))}
      />
    </div>
  )
}

function SelectInput({
  path,
  label,
  options,
}: {
  path: string
  label: string
  options: { label: string; value: string }[]
}) {
  const { value, setValue } = useField<string>({ path })
  return (
    <div className="rebours-admin-settings__field">
      <label>{label}</label>
      <select value={value ?? ''} onChange={(e) => setValue(e.target.value)}>
        {options.map((o) => (
          <option key={o.value} value={o.value}>
            {o.label}
          </option>
        ))}
      </select>
    </div>
  )
}

function CheckboxInput({ path, label }: { path: string; label: string }) {
  const { value, setValue } = useField<boolean>({ path })
  return (
    <label className="rebours-admin-settings__checkbox">
      <input
        type="checkbox"
        checked={!!value}
        onChange={(e) => setValue(e.target.checked)}
      />
      {label}
    </label>
  )
}

function StripeIDReadOnly() {
  const { value } = useField<string>({ path: 'stripeID' })
  return (
    <div className="rebours-admin-settings__field">
      <label>Stripe ID</label>
      <input type="text" value={value ?? ''} readOnly placeholder="Généré à la sauvegarde" />
    </div>
  )
}

export function SettingsDrawer() {
  return (
    <details className="rebours-admin-settings">
      <summary>Réglages avancés</summary>
      <div className="rebours-admin-settings__grid">
        <TextInput path="name" label="Nom technique" />
        <TextInput path="slug" label="URL (slug)" />
        <NumberInput path="sortOrder" label="Ordre d'affichage" />
        <SelectInput
          path="currency"
          label="Devise"
          options={[
            { label: 'EUR', value: 'EUR' },
            { label: 'USD', value: 'USD' },
          ]}
        />
        <SelectInput
          path="availability"
          label="Disponibilité"
          options={[
            { label: 'En stock', value: 'https://schema.org/InStock' },
            { label: 'Limitée', value: 'https://schema.org/LimitedAvailability' },
            { label: 'Sur commande', value: 'https://schema.org/PreOrder' },
            { label: 'Indisponible', value: 'https://schema.org/OutOfStock' },
          ]}
        />
        <CheckboxInput path="isPublished" label="Publié" />
        <TextInput path="seoTitle" label="Titre SEO" />
        <TextAreaInput path="seoDescription" label="Description SEO" />
        <StripeIDReadOnly />
      </div>
    </details>
  )
}
