import Image from 'next/image'
import { useRouter } from 'next/router'
import { useState } from 'react'
import useTranslation from 'next-translate/useTranslation'
import classNames from 'clsx'
import axios from 'axios'

import { Emoji } from '../../Emoji'
import { ConfirmPopup } from '../ConfirmPopup'
import type {
  GuildPublic as GuildPublicType,
  GuildWithDefaultChannelId
} from '../../../models/Guild'
import { useAuthentication } from '../../../tools/authentication'

export interface GuildPublicProps {
  guild: GuildPublicType
}

export const GuildPublic: React.FC<GuildPublicProps> = (props) => {
  const { guild } = props
  const router = useRouter()
  const { authentication } = useAuthentication()
  const [isConfirmed, setIsConfirmed] = useState(false)
  const { t } = useTranslation()

  const handleIsConfirmed = (): void => {
    setIsConfirmed((isConfirmed) => {
      return !isConfirmed
    })
  }

  const handleYes = async (): Promise<void> => {
    try {
      const { data } = await authentication.api.post<{
        guild: GuildWithDefaultChannelId
      }>(`/guilds/${guild.id}/members/join`)
      await router.push(
        `/application/${guild.id}/${data.guild.defaultChannelId}`
      )
    } catch (error) {
      if (
        axios.isAxiosError(error) &&
        error.response?.status === 400 &&
        typeof error?.response?.data.defaultChannelId === 'number'
      ) {
        const defaultChannelId = error.response.data.defaultChannelId as number
        await router.push(`/application/${guild.id}/${defaultChannelId}`)
      } else {
        await router.push('/application')
      }
    }
  }

  return (
    <div className='relative h-80 overflow-hidden rounded border border-gray-500 shadow-lg transition duration-200 ease-in-out hover:-translate-y-2 hover:shadow-none dark:border-gray-700'>
      <div
        className={classNames(
          'flex h-full cursor-pointer flex-col items-center justify-center p-4 pt-8 transition duration-200 ease-in-out',
          { '-translate-x-full': isConfirmed }
        )}
        onClick={handleIsConfirmed}
      >
        <Image
          quality={100}
          className='rounded-full'
          src={
            guild.icon != null ? guild.icon : '/images/data/guild-default.png'
          }
          alt='logo'
          width={80}
          height={80}
        />
        <div className='m-2 mt-6 w-full px-4 text-center'>
          <h3
            data-cy='guild-name'
            className='center mb-2 w-full truncate text-xl font-bold'
          >
            {guild.name}
          </h3>
          <p className='break-words'>
            {guild.description != null ? (
              guild.description
            ) : (
              <span className='flex h-full items-center justify-center opacity-40 dark:opacity-20'>
                <Emoji value=':eyes:' size={25} />
                <span className='ml-2'>{t('application:nothing-here')}</span>
              </span>
            )}
          </p>
        </div>
        <p className='mt-auto flex flex-col text-green-800 dark:text-green-400'>
          {guild.membersCount} {t('application:members')}
        </p>
      </div>
      <ConfirmPopup
        title={`${t('application:join-the-guild')} ?`}
        className={classNames(
          'w-ful h-ful translate-x- absolute left-full top-1/2 flex h-full w-full -translate-y-1/2 flex-col items-center justify-center rounded-2xl transition-all',
          {
            '!left-0': isConfirmed
          }
        )}
        handleYes={handleYes}
        handleNo={handleIsConfirmed}
      />
    </div>
  )
}