import '@qonsoll/asq/dist/styles/index'

import { AnswersContextProvider, FormShow } from '@qonsoll/asq'
import { Box, NoData, Title } from '@qonsoll/react-design'
import { Select, Spin } from 'antd'
import { memo, useMemo } from 'react'
import { useGetForm, useGetQuestions } from './hooks/get'

import PropTypes from 'prop-types'
import { useActionSubmit } from './hooks/actions'

const { Option } = Select

/**
 * It takes the formId,
 * the getForm, the getFormQuestions, the forms, the onFinish, the isViewer, the
 * onChange, and the rest props and returns a box with the answers context provider
 * and the form show
 * @param formId - The id of the form that the user wants to answer.
 * @param getForm - A function that returns a form from the database.
 * @param getFormQuestions - A function that returns the questions for a form.
 * @param forms - an array of forms
 * @param onFinish - A function that will be called when the form is submitted.
 * @param isViewer - boolean
 * @param onChange - A function that is called when the form is changed.
 * @param rest - any
 * @returns The `useMemo` hook is used to return the `handleChange` function.
 */
function Asq(props) {
  const {
    formId,
    getForm,
    getFormQuestions,
    forms,
    onFinish,
    isViewer,
    onChange,
    ...rest
  } = props

  const [form, formLoading] = useGetForm(formId, getForm)
  const [questions, questionsLoading] = useGetQuestions(
    formId,
    getFormQuestions
  )
  const [handleFinish, submitLoading] = useActionSubmit(onFinish)

  const actions = useMemo(() => ({ onFinish: handleFinish }), [handleFinish])
  const handleChange = (formId) => onChange?.({ formId })

  const isLoading = useMemo(() => formLoading || questionsLoading, [
    formLoading,
    questionsLoading
  ])

  return (
    <Box {...rest} position="relative">
      {formId ? (
        <AnswersContextProvider>
          {isLoading ? (
            <Box
              width="100%"
              height="100%"
              display="flex"
              justifyContent="center"
              alignItems="center">
              <Spin />
            </Box>
          ) : (
            <FormShow
              id={formId}
              wrapperPaddings={0}
              preventFirebaseUsage
              noFirebaseForm={form}
              noFirebaseQuestions={questions}
              noFirebaseAnswersScore={[]}
              actions={actions}
              submitLoading={submitLoading}
            />
          )}
        </AnswersContextProvider>
      ) : isViewer ? (
        <Box
          display="flex"
          height="inherit"
          minHeight="inherit"
          alignItems="center"
          justifyContent="center"
          flexDirection="column">
          <NoData description="The form was not chosen or does not exists" />
        </Box>
      ) : (
        <Box
          width="100%"
          height="inherit"
          minHeight="inherit"
          display="flex"
          alignItems="center"
          justifyContent="center"
          flexDirection="column">
          <Box width="50%" maxWidth="300px">
            <Title level={5} textAlign="center" mb={2}>
              Select one of the following forms
            </Title>
            <Select style={{ width: '100%' }} onChange={handleChange}>
              {forms?.map(({ title, _id }) => (
                <Option value={_id} key={_id}>
                  {title}
                </Option>
              ))}
            </Select>
          </Box>
        </Box>
      )}
    </Box>
  )
}

Asq.propTypes = {
  formId: PropTypes.string,
  forms: PropTypes.array,
  getForm: PropTypes.func,
  getFormQuestions: PropTypes.func,
  isViewer: PropTypes.bool,
  onChange: PropTypes.func,
  onFinish: PropTypes.func
}

export default memo(Asq)
