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'

const Chat = ({}) => {
  const { width, height } = useWindowDimensions()
  const [chatIsOpen, toggleChatOpen] = useToggle(true)
  return chatIsOpen ? (
    <ChatWrapper>
      <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/803918964082212905?css=215&defaultchannel=817134294199566356&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
