import { memo } from 'react'
import classNames from 'clsx'
import Link from 'next/link'
import { useRouter } from 'next/router'
import { CogIcon } from '@heroicons/react/solid'

import { GuildsChannelsPath } from '../Application'
import { Channel as ChannelType } from '../../../models/Channel'
import { useGuildMember } from '../../../contexts/GuildMember'
import { IconButton } from '../../design/IconButton'

export interface ChannelProps {
  path: GuildsChannelsPath
  channel: ChannelType
  selected?: boolean
}

const ChannelMemo: React.FC<ChannelProps> = (props) => {
  const { channel, path, selected = false } = props
  const router = useRouter()

  const { member } = useGuildMember()

  return (
    <Link href={`/application/${path.guildId}/${channel.id}`}>
      <a
        className={classNames(
          'group relative my-3 mx-3 flex items-center justify-between overflow-hidden rounded-lg py-2 text-sm transition-all duration-200 hover:bg-gray-100 dark:hover:bg-gray-600',
          {
            'font-semibold text-green-800 dark:text-green-400': selected
          }
        )}
      >
        <span
          className='max-[315px] ml-2 mr-4 break-all'
          data-cy='channel-name'
        >
          # {channel.name}
        </span>
        {member.isOwner && (
          <IconButton
            onClick={async () => {
              await router.push(
                `/application/${channel.guildId}/${channel.id}/settings`
              )
            }}
            className='bg-unherit absolute -right-10 h-full w-8 transition-all group-hover:right-0 group-hover:shadow-lg dark:group-hover:bg-gray-600'
            title='Settings'
          >
            <CogIcon height={20} width={20} />
          </IconButton>
        )}
      </a>
    </Link>
  )
}

export const Channel = memo(ChannelMemo)