import React, { useMemo, useState } from 'react'

import { Button, Input } from 'antd'
import { useNavigate } from 'react-router-dom'

import { createOrg } from '~/api'
import { useMutation } from '~/hooks/use-mutation'
import { orgsTelemetry } from '~/telemetry'

const Page: React.FC = () => {
  const [orgName, setOrgName] = useState('')
  const btnDisable = useMemo(() => orgName.trim() === '', [orgName])
  const navigate = useNavigate()

  const createOrgMut = useMutation(createOrg)

  function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
    const name = orgName.trim()

    event.preventDefault()

    createOrgMut.run(name, function (res) {
      orgsTelemetry.confirmCreateOrg(res.data.id!, name)
      navigate(`/orgs/${res.data.id}`)
    })
  }

  return (
    <div className='flex flex-col items-center h-full m-auto'>
      <div className='flex-1 flex flex-col justify-center items-center pb-24'>
        <section className='mt-8 text-center flex flex-col'>
          <h1 className='text-4xl'>What’s the name of your company or team?</h1>
          <span className='text-sm'>
            This will be the name of your Clinic Organization — choose something
            that your team will recognize.
          </span>
        </section>

        <form onSubmit={handleSubmit}>
          <section className='py-16'>
            <Input
              disabled={createOrgMut.loading}
              style={{ width: 600, padding: 8 }}
              placeholder='Ex: PingCAP Co. or PingCAP AskTUG'
              value={orgName}
              onChange={(e) => setOrgName(e.target.value)}
            />
          </section>

          <section className='text-center'>
            <Button
              type='primary'
              htmlType='submit'
              style={{ paddingLeft: 48, paddingRight: 48 }}
              disabled={btnDisable}
              loading={createOrgMut.loading}
            >
              {createOrgMut.loading ? 'Creating' : 'Create'}
            </Button>
          </section>
        </form>
      </div>
    </div>
  )
}

export default Page