import React from "react";
import styled from "styled-components";
import Header from "./Header";
import Input from "./Input";
import Button from "./Button";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import {
  faAddressBook,
  faArrowDown,
  faPlus,
} from "@fortawesome/free-solid-svg-icons";

const Wrapper = styled.div`
  display: grid;
  width: 100%;
  height: 100%;
  grid-template-rows: 80px auto min-content;
  grid-template-areas:
    "Header"
    "Workspace";
  .Header {
    box-shadow: none;
  }
`;

const ChatWrapper = styled.div`
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%;
  grid-template-columns: 200px auto;
  grid-area: "Workspace";
`;

const ChatMenuContainer = styled.div`
  display: grid;
  width: 200px;
  height: 100%;
  background-color: #667aff;
  color: white;
  grid-template-rows: 80px 1fr 1fr;
`;

const TitleContainer = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.5);
`;

const Title = styled.span`
  font-family: "Chelsea Market", cursive;
`;

const ItemText = styled.span`
  font-family: "Ubuntu", sans-serif;
`;

const PeopleContainer = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;
  svg {
    font-size: 20px;
  }
  span {
    margin-left: 10px;
    font-size: 20px;
  }
  border-top: 1px solid rgba(255, 255, 255, 0.5);
`;

const CategoryContainer = styled.div`
  display: flex;
  svg {
    font-size: 20px;
  }
  span {
    margin-left: 10px;
    font-size: 20px;
  }
  border-top: 1px solid rgba(255, 255, 255, 0.5);
`;

const ItemListContainer = styled.div`
  display: flex;
  flex-direction: row;
  width: 100%;
  padding: 15px;
`;

const ItemList = styled.ul`
  align-items: center;
  svg {
    margin: 0px 10px;
  }
`;

const Item = styled.li``;

const ChatScreenContainer = styled.div`
  display: grid;
  width: 100%;
  height: 100%;
  grid-template-rows: 70px 1fr;
`;

const ChatScreenHeader = styled.div`
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
`;

const ChatScreenBox = styled.div`
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
`;

const InputWrapper = styled.div`
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 10px;
  margin-bottom: 10px;
  width: 100%;
`;

const InputContainer = styled.div`
  position: fixed;
  bottom: 0;
  padding: 10px;
  margin-bottom: 20px;
  display: flex;
  flex-direction: row;
  width: 70%;
  form {
    width: 100%;
    button {
      background-color: #27ae60;
      width: 10%;
      color: white;
      border-radius: 10px;
    }
    input {
      width: 70%;
    }
  }
  border: 1px solid rgba(0, 0, 0, 0.7);
  border-radius: 10px;
`;

export default ({ data }) => {
  return (
    <Wrapper>
      <Header text={"KhuChat"} />
      <ChatWrapper className="ChatWrapper">
        <ChatMenuContainer>
          <TitleContainer>
            <Title>First Room</Title>
          </TitleContainer>
          <PeopleContainer>
            <FontAwesomeIcon icon={faAddressBook} />
            <ItemText>People</ItemText>
          </PeopleContainer>
          <CategoryContainer>
            <ItemListContainer>
              <ItemList>
                <FontAwesomeIcon icon={faArrowDown} /> Category
                <FontAwesomeIcon icon={faPlus} />
                <Item>
                  <ItemText># Music</ItemText>
                </Item>
                <Item>
                  <ItemText># Music</ItemText>
                </Item>
                <Item>
                  <ItemText># Music</ItemText>
                </Item>
              </ItemList>
            </ItemListContainer>
          </CategoryContainer>
        </ChatMenuContainer>
        <ChatScreenContainer>
          <ChatScreenHeader>
            <Title>Selected Menu Title</Title>
          </ChatScreenHeader>
          <ChatScreenBox>
            <InputWrapper>
              <InputContainer>
                <form>
                  <Input placeholder={"Enter any words"} />
                  <Button text={"Submit"} />
                </form>
              </InputContainer>
            </InputWrapper>
          </ChatScreenBox>
        </ChatScreenContainer>
      </ChatWrapper>
    </Wrapper>
  );
};