import { getGetServerSideProps } from '@/api/ssrApollo'
import Items from '@/components/items'
import { useRouter } from 'next/router'
import { USER, USER_WITH_ITEMS } from '@/fragments/users'
import { useQuery } from '@apollo/client'
import { COMMENT_TYPE_QUERY, ITEM_SORTS, ITEM_TYPES_USER, WHENS } from '@/lib/constants'
import PageLoading from '@/components/page-loading'
import { UserLayout } from '.'
import { Form, Select, DatePicker } from '@/components/form'
import { whenToFrom } from '@/lib/time'

const staticVariables = { sort: 'user' }
const variablesFunc = vars => ({
  includeComments: COMMENT_TYPE_QUERY.includes(vars.type),
  ...staticVariables,
  ...vars
})
export const getServerSideProps = getGetServerSideProps(
  { query: USER_WITH_ITEMS, variables: variablesFunc, notFound: data => !data.user })

export default function UserItems ({ ssrData }) {
  const router = useRouter()
  const variables = variablesFunc(router.query)

  const { data } = useQuery(USER, { variables })
  if (!data && !ssrData) return <PageLoading />

  const { user } = data || ssrData

  return (
    <UserLayout user={user}>
      <div className='mt-2'>
        <UserItemsHeader type={variables.type} name={user.name} />
        <Items
          ssrData={ssrData}
          variables={variables}
          query={USER_WITH_ITEMS}
        />
      </div>
    </UserLayout>
  )
}

function UserItemsHeader ({ type, name }) {
  const router = useRouter()
  async function select (values) {
    let { type, ...query } = values
    if (!type || type === 'all' || !ITEM_TYPES_USER.includes(type)) type = 'all'
    if (!query.by || query.by === 'recent' || !ITEM_SORTS.includes(query.by)) delete query.by
    if (!query.when || query.when === 'forever' || !WHENS.includes(query.when) || query.when === 'forever') delete query.when
    if (query.when !== 'custom') { delete query.from; delete query.to }
    if (query.from && !query.to) return

    await router.push({
      pathname: `/${name}/${type}`,
      query
    })
  }

  type ||= router.query.type || 'all'
  const by = router.query.by || 'recent'
  const when = router.query.when || 'forever'

  return (
    <Form
      initial={{ type, by, when, from: '', to: '' }}
      onSubmit={select}
    >
      <div className='text-muted fw-bold d-flex align-items-center flex-wrap'>
        <div className='text-muted fw-bold mb-2 d-flex align-items-center'>
          <Select
            groupClassName='mb-0 me-2'
            name='type'
            size='sm'
            overrideValue={type}
            items={ITEM_TYPES_USER}
            onChange={(formik, e) => select({ ...formik?.values, type: e.target.value })}
          />
          by
          <Select
            groupClassName='mb-0 mx-2'
            name='by'
            size='sm'
            overrideValue={by}
            items={['recent', ...ITEM_SORTS]}
            onChange={(formik, e) => select({ ...formik?.values, by: e.target.value })}
          />
          for
          <Select
            groupClassName='mb-0 mx-2'
            name='when'
            size='sm'
            items={WHENS}
            overrideValue={when}
            onChange={(formik, e) => {
              const range = e.target.value === 'custom' ? { from: whenToFrom(when), to: Date.now() } : {}
              select({ ...formik?.values, when: e.target.value, ...range })
            }}
          />
        </div>
        {when === 'custom' &&
          <DatePicker
            fromName='from' toName='to'
            className='p-0 px-2'
            onChange={(formik, [from, to], e) => {
              select({ ...formik?.values, from: from.getTime(), to: to.getTime() })
            }}
            from={router.query.from}
            to={router.query.to}
            when={when}
          />}
      </div>
    </Form>
  )
}