import { h } from 'preact'
import { useEffect, useRef, useState } from 'preact/hooks'
import { useWindowDimensions } from '../../hooks/dom'
import { useToggle } from '../../hooks/utility'

import { Label } from '../Text'
import {
  ChatFrame,
  ChatWrapper,
  ChatHeader,
  CloseBox,
  OpenIcon,
} from './styles'
import { colours } from '../../assets/theme'
import config from '../../data/config'

const Chat = ({ overlayActive }) => {
  const { width, height } = useWindowDimensions()
  const [chatIsOpen, toggleChatOpen] = useToggle(true)
  return chatIsOpen ? (
    <ChatWrapper chatIsOpen={chatIsOpen} overlayActive={overlayActive}>
      <ChatFrame>
        <ChatHeader chatIsOpen>
          <Label weight="400" size={24}>
            Chat
          </Label>
          <CloseBox colour={colours.white} size={18} onClick={toggleChatOpen} />
        </ChatHeader>
        <iframe
          src={`https://titanembeds.com/embed/${config.chat.guildId}?css=${config.chat.css}&defaultchannel=${config.chat.channelId}&lang=en_EN`}
          height={(height / 4) * 3}
          width="350"
          frameBorder="0"
          title="discord-chat"
          className="titanembed"
        />
      </ChatFrame>
    </ChatWrapper>
  ) : (
    <ChatHeader chatIsOpen={false} onClick={toggleChatOpen}>
      <Label weight="400" size={24}>
        CHAT
      </Label>
      <OpenIcon colour={colours.white} size={16} />
    </ChatHeader>
  )
}

export default Chat
