import React from 'react'

export function handleVariantToggleClick(
  toggleMode: 'wmd' | 'attacked',
  selectedVariant: string,
  setSelectedVariant: (v: string) => void,
  variantKeys: string[]
) {
  if (toggleMode === 'wmd') {
    if (selectedVariant === 'original' && variantKeys.includes('wmd')) {
      setSelectedVariant('wmd')
    } else {
      setSelectedVariant('original')
    }
  } else if (toggleMode === 'attacked') {
    if (selectedVariant === 'original' && variantKeys.includes('attacked')) {
      setSelectedVariant('attacked')
    } else {
      setSelectedVariant('original')
    }
  } else {
    setSelectedVariant('original')
  }
}

interface ExampleVariantToggleProps {
  toggleMode: 'wmd' | 'attacked'
  setToggleMode: (mode: 'wmd' | 'attacked') => void
  type?: 'radio' | 'button'
  selectedVariant: string
  setSelectedVariant: (v: string) => void
  variantKeys: string[]
}

const ExampleVariantToggle: React.FC<ExampleVariantToggleProps> = ({
  toggleMode,
  setToggleMode,
  type = 'radio',
  selectedVariant,
  setSelectedVariant,
  variantKeys,
}) => {
  if (type === 'button') {
    return (
      <div className="my-2 flex gap-6">
        <button
          className={`btn ${toggleMode === 'wmd' ? 'btn-primary' : 'btn-outline'}`}
          type="button"
          onClick={() => {
            setToggleMode('wmd')
            handleVariantToggleClick(toggleMode, selectedVariant, setSelectedVariant, variantKeys)
          }}
        >
          Original ⇄ Watermarked
        </button>
        <button
          className={`btn ${toggleMode === 'attacked' ? 'btn-primary' : 'btn-outline'}`}
          type="button"
          onClick={() => {
            setToggleMode('attacked')
            handleVariantToggleClick(toggleMode, selectedVariant, setSelectedVariant, variantKeys)
          }}
        >
          Original ⇄ Attacked
        </button>
      </div>
    )
  }
  // Default radio mode
  return (
    <fieldset className="fieldset w-full p-4 rounded border border-gray-700 bg-base-200 mb-4">
      <legend className="fieldset-legend font-semibold">Click Toggle</legend>
      <div className="mb-2 flex gap-6">
        <label className="flex items-center gap-2 cursor-pointer">
          <input
            type="radio"
            name="variant-toggle"
            value="wmd"
            checked={toggleMode === 'wmd'}
            onChange={() => setToggleMode('wmd')}
          />
          <span>Original ⇄ Watermarked</span>
        </label>
        <label className="flex items-center gap-2 cursor-pointer">
          <input
            type="radio"
            name="variant-toggle"
            value="attacked"
            checked={toggleMode === 'attacked'}
            onChange={() => setToggleMode('attacked')}
          />
          <span>Original ⇄ Attacked</span>
        </label>
      </div>
    </fieldset>
  )
}

export default ExampleVariantToggle