import { useState } from "react";
import styled from "styled-components";
import ChannelModal from "../component/ChannelModal";
import InviteModal from "../component/InviteModal";
import IconChat from "../../assets/icons/placeholder.chat.svg";
import IconAsk from "../../assets/icons/placeholder.question.svg";
import IconInvite from "../../assets/icons/placeholder.invite.svg";
import IconDownload from "../../assets/icons/placeholder.download.svg";
import { NavLink } from "react-router-dom";
import ContactsModal from "./ContactsModal";
import { useSelector } from "react-redux";
const Styled = styled.div`
  margin-top: -50px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  .head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    .title {
      font-weight: 700;
      font-size: 30px;
      line-height: 38px;
      color: #344054;
    }
    .desc {
      text-align: center;
      font-weight: 400;
      font-size: 14px;
      line-height: 20px;
      color: #98a2b3;
      max-width: 424px;
    }
  }
  .boxes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 24px;
    .box {
      cursor: pointer;
      width: 200px;
      height: 200px;
      background: #f9fafb;
      border-radius: 20px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 16px;
      .icon {
        width: 40px;
        height: 40px;
      }
      .txt {
        padding: 0 21px;
        text-align: center;
        font-weight: 700;
        font-size: 14px;
        line-height: 20px;
        color: #475467;
      }
    }
  }
`;
export default function BlankPlaceholder({ type = "chat" }) {
  const server = useSelector((store) => store.server);
  const [inviteModalVisible, setInviteModalVisible] = useState(false);
  const [createChannelVisible, setCreateChannelVisible] = useState(false);
  const [contactListVisible, setContactListVisible] = useState(false);
  const toggleChannelModalVisible = () => {
    setCreateChannelVisible((prev) => !prev);
  };
  const toggleContactListVisible = () => {
    setContactListVisible((prev) => !prev);
  };
  const toggleInviteModalVisible = () => {
    setInviteModalVisible((prev) => !prev);
  };
  const chatTip =
    type == "chat"
      ? "Create a Channel to Start a Conversation"
      : "Send a Direct Message";
  const chatHanlder =
    type == "chat" ? toggleChannelModalVisible : toggleContactListVisible;
  return (
    <>
      <Styled>
        <div className="head">
          <h2 className="title">Welcome to {server.name} server</h2>
          <p className="desc">
            Here are some steps to help you get started. For more, check out our
            Getting Started guide
          </p>
        </div>
        <div className="boxes">
          <div className="box" onClick={toggleInviteModalVisible}>
            <IconInvite className="icon" />
            <div className="txt">Invite your friends or teammates</div>
          </div>
          <div className="box" onClick={chatHanlder}>
            <IconChat className="icon" />
            <div className="txt">{chatTip}</div>
          </div>
          <a className="box" href="#">
            <IconDownload className="icon" />
            <div className="txt">Download PC and Mobile apps</div>
          </a>
          <NavLink to={"#"} className="box">
            <IconAsk className="icon" />
            <div className="txt">Got quesions? Visit our help center </div>
          </NavLink>
        </div>
      </Styled>
      {createChannelVisible && (
        <ChannelModal personal={true} closeModal={toggleChannelModalVisible} />
      )}
      {contactListVisible && (
        <ContactsModal closeModal={toggleContactListVisible} />
      )}
      {inviteModalVisible && (
        <InviteModal closeModal={toggleInviteModalVisible} />
      )}
    </>
  );
}
