Question*

setQuestion(e.target.value || '')}
              />
            </div>
          </form>
          <NewContract question={question} />
        </div>
      </div>
    </Page>
  )
}

// Allow user to create a new contract
export function NewContract(props: { question: string; tag?: string }) {
  const { question, tag } = props
  const creator = useUser()

useEffect(() => {
    if (creator === null) router.push('/')
  }, [creator])

useEffect(() => {
    createContract({}).catch(() => {}) // warm up function
  }, [])

const [outcomeType, setOutcomeType] = useState<outcomeType>('BINARY')
  const [resolutionType, setResolutionType] = useState<resolutionType>('MANUAL')
  const [automaticResolution, setAutomaticResolution] = useState<resolution>('YES')
  const [initialProb, setInitialProb] = useState(50)
  const [minString, setMinString] = useState('')
  const [maxString, setMaxString] = useState('')
  const [description, setDescription] = useState('')
  const [showCalendar, setShowCalendar] = useState(false)
  const [showNumInput, setShowNumInput] = useState(false)

const [category, setCategory] = useState<string>('')
  // const [tagText, setTagText] = useState<string>(tag ?? '')
  // const tags = parseWordsAsTags(tagText)

const [ante, setAnte] = useState(FIXED_ANTE)

const mustWaitForDailyFreeMarketStatus = useHasCreatedContractToday(creator)

// useEffect(() => {
  //   if (ante === null && creator) {
  //     const initialAnte = creator.balance < 100 ? MINIMUM_ANTE : 100
  //     setAnte(initialAnte)
  //   }
  // }, [ante, creator])

// const [anteError, setAnteError] = useState<string | undefined>()
  // By default, close the market a week from today
  const [closeDate, setCloseDate] = useState<undefined | string>(weekFrom(dayjs()))
  const [resolutionDate, setResolutionDate] = useState<undefined | string>(weekFrom(closeDate))

const [isSubmitting, setIsSubmitting] = useState(false)

const closeTime = closeDate ? dayjs(closeDate).valueOf() : undefined
  const resolutionTime = resolutionDate ? dayjs(resolutionDate).valueOf() : undefined

const balance = creator?.balance || 0

const min = minString ? parseFloat(minString) : undefined
  const max = maxString ? parseFloat(maxString) : undefined

const isValid =
    initialProb > 0 &&
    initialProb < 100 &&
    question.length > 0 &&
    ante !== undefined &&
    ante !== null &&
    ante >= MINIMUM_ANTE &&
    (ante <= balance ||
      (mustWaitForDailyFreeMarketStatus != 'loading' &&
        !mustWaitForDailyFreeMarketStatus)) &&
    // closeTime must be in the future
    closeTime &&
    closeTime > Date.now() &&
    (outcomeType !== 'NUMERIC' ||
      (min !== undefined &&
        max !== undefined &&
        isFinite(min) &&
        isFinite(max) &&
        min < max &&
        max - min > 0.01))

function weekFrom(date: string | dayjs.Dayjs | undefined) {
    return dayjs(date).add(7, 'day').format('YYYY-MM-DDT23:59')
  }

function setCloseDateInDays(days: number) {
    setShowCalendar(days === 0)
    const newCloseDate = dayjs().add(days, 'day').format('YYYY-MM-DDT23:59')
    setCloseDate(newCloseDate)
  }

async function submit() {
    // TODO: Tell users why their contract is invalid
    if (!creator || !isValid) return

setIsSubmitting(true)

try {
      const result = await createContract(
        removeUndefinedProps({
          question,
          outcomeType,
          description,
          initialProb,
          ante,
          closeTime,
          tags: category ? [category] : undefined,
          min,
          max,
          automaticResolution,
          resolutionTime
        })
      )
      await router.push(contractPath(result as Contract))
    } catch (e) {
      console.log('error creating contract', e)
    }
  }

const descriptionPlaceholder =
    outcomeType === 'BINARY'
      ? `e.g. This question resolves to "YES" if they receive the majority of votes...`
      : `e.g. I will choose the answer according to...`

if (!creator) return <></>

return (
    <div>
      <label className="label mt-1">
        <span className="my-1">Answer type</span>
      </label>
      <Row className="form-control gap-2">
        <label className="label cursor-pointer gap-2">
          <input
            className="radio"
            type="radio"
            name="opt"
            checked={outcomeType === 'BINARY'}
            value="BINARY"
            onChange={() => setOutcomeType('BINARY')}
            disabled={isSubmitting}
          />
          <span className="label-text">Yes / No</span>
        </label>

<label className="label cursor-pointer gap-2">
          <input
            className="radio"
            type="radio"
            name="opt"
            checked={outcomeType === 'FREE_RESPONSE'}
            value="FREE_RESPONSE"
            onChange={() => setOutcomeType('FREE_RESPONSE')}
            disabled={isSubmitting}
          />
          <span className="label-text">Free response</span>
        </label>
        <label className="label cursor-pointer gap-2">
          <input
            className="radio"
            type="radio"
            name="opt"
            checked={outcomeType === 'NUMERIC'}
            value="NUMERIC"
            onChange={() => setOutcomeType('NUMERIC')}
          />
          <span className="label-text">Numeric (experimental)</span>
        </label>
      </Row>
      <Spacer h={4} />

{outcomeType === 'BINARY' && (
        <div className="form-control">
          <Row className="label justify-start">
            <span className="mb-1">How likely is it to happen?</span>
            <CalculatorIcon
              className={clsx(
                'ml-2 cursor-pointer rounded-md',
                'hover:bg-gray-200',
                showNumInput && 'stroke-indigo-700'
              )}
              height={20}
              onClick={() => setShowNumInput(!showNumInput)}
            />
          </Row>
          <Row className={'w-full items-center sm:gap-2'}>
            <ChoicesToggleGroup
              currentChoice={initialProb}
              setChoice={setInitialProb}
              choices={[25, 50, 75]}
              titles={['Unlikely', 'Unsure', 'Likely']}
              isSubmitting={isSubmitting}
            />
            {showNumInput && (
              <>
                <input
                  type="number"
                  value={initialProb}
                  className={
                    'max-w-[16%] sm:max-w-[15%] ' +
                    'input-bordered input-md mt-2 rounded-md p-1 text-lg sm:p-4'
                  }
                  disabled={isSubmitting}
                  min={10}
                  max={90}
                  onChange={(e) =>
                    setInitialProb(parseInt(e.target.value.substring(0, 2)))
                  }
                />
                <span className={'mt-2'}>%</span>
              </>
            )}
          </Row>
        </div>
      )}

{outcomeType === 'NUMERIC' && (
        <div className="form-control items-start">
          <label className="label gap-2">
            <span className="mb-1">Range</span>
            <InfoTooltip text="The minimum and maximum numbers across the numeric range." />
          </label>

<Row className="gap-2">
            <input
              type="number"
              className="input input-bordered"
              placeholder="MIN"
              onClick={(e) => e.stopPropagation()}
              onChange={(e) => setMinString(e.target.value)}
              min={Number.MIN_SAFE_INTEGER}
              max={Number.MAX_SAFE_INTEGER}
              disabled={isSubmitting}
              value={minString ?? ''}
            />
            <input
              type="number"
              className="input input-bordered"
              placeholder="MAX"
              onClick={(e) => e.stopPropagation()}
              onChange={(e) => setMaxString(e.target.value)}
              min={Number.MIN_SAFE_INTEGER}
              max={Number.MAX_SAFE_INTEGER}
              disabled={isSubmitting}
              value={maxString}
            />
          </Row>
        </div>
      )}

<div className="form-control mb-1 items-start">
        <label className="label mb-1 gap-2">
          <span className="mb-1">Description</span>
          <InfoTooltip text="Optional. Describe how you will resolve this market." />
        </label>
        <Textarea
          className="textarea textarea-bordered w-full resize-none"
          rows={3}
          maxLength={MAX_DESCRIPTION_LENGTH}
          placeholder={descriptionPlaceholder}
          value={description}
          disabled={isSubmitting}
          onClick={(e) => e.stopPropagation()}
          onChange={(e) => setDescription(e.target.value || '')}
        />
      </div>

<div className="form-control max-w-sm items-start">
        <label className="label gap-2">
          <span className="mb-1">Category</span>
        </label>

<select
          className="select select-bordered w-full max-w-xs"
          value={category}
          onChange={(e) => setCategory(e.currentTarget.value ?? '')}
        >
          <option value={''}>(none)</option>
          {Object.entries(CATEGORIES).map(([id, name]) => (
            <option key={id} value={id}>
              {name}
            </option>
          ))}
        </select>
      </div>

<div className="form-control mb-1 items-start">
        <label className="label mb-1 gap-2">
          <span>Question expires in a:</span>
          <InfoTooltip text="Betting will be halted after this date (local timezone)." />
        </label>
        <Row className={'w-full items-center gap-2'}>
          <ChoicesToggleGroup
            currentChoice={
              closeDate
                ? [1, 7, 30, 365, 0].includes(
                    dayjs(closeDate).diff(dayjs(), 'day')
                  )
                  ? dayjs(closeDate).diff(dayjs(), 'day')
                  : 0
                : -1
            }
            setChoice={setCloseDateInDays}
            choices={[1, 7, 30, 0]}
            titles={['Day', 'Week', 'Month', 'Custom']}
            isSubmitting={isSubmitting}
          />
        </Row>
        {showCalendar && (
          <input
            type={'date'}
            className="input input-bordered mt-4"
            onClick={(e) => e.stopPropagation()}
            onChange={(e) =>
              setCloseDate(
                dayjs(e.target.value).format('YYYY-MM-DDT23:59') || ''
              )
            }
            min={Date.now()}
            disabled={isSubmitting}
            value={dayjs(closeDate).format('YYYY-MM-DD')}
          />
        )}
      </div>

{outcomeType === 'BINARY' && (
        <div>
          <Spacer h={4} />
          <div className="form-control mb-1 items-start">
            <label className="label mt-1 gap-2">
              <span>Resolution type</span>
              <InfoTooltip text="Combined markets can be resolved manually but will be resolved automatically under given conditions." />
            </label>
            <Row className="form-control gap-2">
              <label className="label cursor-pointer gap-2">
                <input
                  className="radio"
                  type="radio"
                  name="res"
                  checked={resolutionType === 'MANUAL'}
                  value="MANUAL"
                  onChange={() => setResolutionType('MANUAL')}
                  disabled={isSubmitting}
                />
                <span className="label-text">Manual</span>
              </label>

<label className="label cursor-pointer gap-2">
                <input
                  className="radio"
                  type="radio"
                  name="res"
                  checked={resolutionType === 'COMBINED'}
                  value="COMBINED"
                  onChange={() => setResolutionType('COMBINED')}
                  disabled={isSubmitting}
                />
                <span className="label-text">Combined (experimental)</span>
              </label>
            </Row>
          </div>

{resolutionType === 'COMBINED' && (
            <div className="form-control mb-1 items-start">
              <label className="label mb-1 gap-2">
                <span>Question resolves automatically as:</span>
                <InfoTooltip text="The market will be resolved automatically on this date (local timezone)." />
              </label>
              <Row className={'w-full items-center gap-2'}>
                <ChoicesToggleGroup
                  currentChoice={automaticResolution}
                  setChoice={setAutomaticResolution}
                  choices={['YES', 'NO', 'MKT', 'CANCEL']}
                  titles={['YES', 'NO', 'PROB', 'N/A']}
                  isSubmitting={isSubmitting}
                />
              </Row>
              <input
                type={'date'}
                className="input input-bordered mt-4"
                onClick={(e) => e.stopPropagation()}
                onChange={(e) =>
                  setResolutionDate(
                    dayjs(e.target.value).format('YYYY-MM-DDT23:59') || ''
                  )
                }
                min={Date.parse(closeDate??"")} // TODO: Fix: Market can be created with dates in the past
                disabled={isSubmitting}
                value={dayjs(resolutionDate).format('YYYY-MM-DD')}
              />
            </div>
          )}
        </div>
      )}

<div className="form-control mb-1 items-start">
        <label className="label mb-1 gap-2">
          <span>Cost</span>
          {mustWaitForDailyFreeMarketStatus != 'loading' &&
            mustWaitForDailyFreeMarketStatus && (
              <InfoTooltip
                text={`Cost to create your market. This amount is used to subsidize trading.`}
              />
            )}
        </label>
        {mustWaitForDailyFreeMarketStatus != 'loading' &&
        !mustWaitForDailyFreeMarketStatus ? (
          <div className="label-text text-primary pl-1">
            <span className={'label-text text-neutral line-through '}>
              {formatMoney(ante)}
            </span>{' '}
            FREE
          </div>
        ) : (
          mustWaitForDailyFreeMarketStatus != 'loading' && (
            <div className="label-text text-neutral pl-1">
              {formatMoney(ante)}
            </div>
          )
        )}
        {mustWaitForDailyFreeMarketStatus != 'loading' &&
          mustWaitForDailyFreeMarketStatus &&
          ante > balance && (
            <div className="mb-2 mt-2 mr-auto self-center whitespace-nowrap text-xs font-medium tracking-wide">
              <span className="mr-2 text-red-500">Insufficient balance</span>
              <button
                className="btn btn-xs btn-primary"
                onClick={() => (window.location.href = '/add-funds')}
              >
                Add funds
              </button>
            </div>
          )}

{/* <BuyAmountInput
          amount={ante ?? undefined}
          minimumAmount={MINIMUM_ANTE}
          onChange={setAnte}
          error={anteError}
          setError={setAnteError}
          disabled={isSubmitting}
          contractIdForLoan={undefined}
        /> */}
      </div>

<div className="my-4 flex justify-end">
        <button
          type="submit"
          className={clsx(
            'btn btn-primary capitalize',
            isSubmitting && 'loading disabled'
          )}
          disabled={isSubmitting || !isValid}
          onClick={(e) => {
            e.preventDefault()
            submit()
          }}
        >
          {isSubmitting ? 'Creating...' : 'Create market'}
        </button>
      </div>
    </div> 
  )
}