import { ChevronDown } from 'lucide-react'
import {
  addWorkshopSampleAdvisorPanel,
  addWorkshopSamplePersonas,
  deleteWorkshopSampleAdvisorPanel,
  deleteWorkshopSamplePersonas,
} from '../lib/creations'

type Props = {
  open: boolean
  onToggle: () => void
  /** Called after a sample-data action so the parent can close the menu. */
  onActionComplete?: () => void
}

export function SampleDataMenuItem({ open, onToggle, onActionComplete }: Props) {
  const run = (fn: () => void) => {
    fn()
    onActionComplete?.()
  }

  return (
    <div className="user-dropdown-speech">
      <button
        type="button"
        role="menuitem"
        className="user-dropdown-speech-trigger"
        onClick={(e) => {
          e.stopPropagation()
          onToggle()
        }}
        aria-expanded={open}
        aria-controls="sample-data-submenu"
        id="sample-data-trigger"
      >
        <span>Sample Data</span>
        <ChevronDown size={16} className={open ? 'user-dropdown-speech-chevron--open' : ''} aria-hidden />
      </button>
      {open && (
        <div
          id="sample-data-submenu"
          role="region"
          aria-labelledby="sample-data-trigger"
          className="user-dropdown-speech-body"
          onMouseDown={(e) => e.stopPropagation()}
        >
          <div className="user-dropdown-sample-actions">
            <button
              type="button"
              className="user-dropdown-sample-action"
              onClick={() => run(addWorkshopSamplePersonas)}
            >
              Add Sample Personas
            </button>
            <button
              type="button"
              className="user-dropdown-sample-action"
              onClick={() => run(addWorkshopSampleAdvisorPanel)}
            >
              Add Sample Advisor Panel
            </button>
            <button
              type="button"
              className="user-dropdown-sample-action user-dropdown-sample-action--danger"
              onClick={() => run(deleteWorkshopSamplePersonas)}
            >
              Delete Sample Personas
            </button>
            <button
              type="button"
              className="user-dropdown-sample-action user-dropdown-sample-action--danger"
              onClick={() => run(deleteWorkshopSampleAdvisorPanel)}
            >
              Delete Sample Advisor Panel
            </button>
          </div>
        </div>
      )}
    </div>
  )
}