import { useState } from 'react';
import {
  BuildingOffice2Icon,
  CalendarDaysIcon,
  QuestionMarkCircleIcon,
} from '@heroicons/react/24/outline';
import { TextInput } from '@tih/ui';

import { useProtectedCallback } from '~/utils/questions/useProtectedCallback';

import ContributeQuestionDialog from './ContributeQuestionDialog';
import type { ContributeQuestionFormProps } from './forms/ContributeQuestionForm';

export type ContributeQuestionCardProps = Pick<
  ContributeQuestionFormProps,
  'onSubmit'
>;

export default function ContributeQuestionCard({
  onSubmit,
}: ContributeQuestionCardProps) {
  const [showDraftDialog, setShowDraftDialog] = useState(false);

  const handleDraftDialogCancel = () => {
    setShowDraftDialog(false);
  };

  const handleOpenContribute = useProtectedCallback(() => {
    setShowDraftDialog(true);
  });

  return (
    <button
      className="flex w-full flex-col items-stretch justify-center gap-2 rounded-md border border-slate-300 bg-white p-4 text-left hover:bg-slate-100"
      type="button"
      onClick={handleOpenContribute}>
      <TextInput
        disabled={true}
        isLabelHidden={true}
        label="Question"
        placeholder="Contribute a question"
        onChange={handleOpenContribute}
      />
      <div className="flex flex-wrap items-end justify-start gap-2">
        <div className="min-w-[150px] flex-1">
          <TextInput
            disabled={true}
            label="Company"
            startAddOn={BuildingOffice2Icon}
            startAddOnType="icon"
            onChange={handleOpenContribute}
          />
        </div>
        <div className="min-w-[150px] flex-1">
          <TextInput
            disabled={true}
            label="Question type"
            startAddOn={QuestionMarkCircleIcon}
            startAddOnType="icon"
            onChange={handleOpenContribute}
          />
        </div>
        <div className="min-w-[150px] flex-1">
          <TextInput
            disabled={true}
            label="Date"
            startAddOn={CalendarDaysIcon}
            startAddOnType="icon"
            onChange={handleOpenContribute}
          />
        </div>
        <h1 className="bg-primary-600 hover:bg-primary-700 rounded-full px-3 py-2 text-white">
          Contribute
        </h1>
      </div>
      <ContributeQuestionDialog
        show={showDraftDialog}
        onCancel={handleDraftDialogCancel}
        onSubmit={onSubmit}
      />
    </button>
  );
}