'use client';

import { ConditionalNull } from "@/components/utility/Conditional";
import React, { useState } from "react";
import styles from "./ChatLayout.module.css";
import { useRouter } from "next/navigation";
import Link from "next/link";

export function ChatLayout<PropFormat>({
  title, 
  subtitle,
  backButton = false, 
  children,
  footerChildren,
  props,
}:{
  title: string, 
  subtitle?: string,
  backButton?: boolean, 
  children: React.ReactNode,
  footerChildren: React.ReactNode,
  props?:{
    channels: {
      name:string,
      action: () => void,
      readable: boolean,
      writable: boolean
    }[],
    channelIndicators: {[key:string]:boolean},
    users: {
      id: string,
      username: string,
      instance: string,
      admin: boolean
    }[],
    currentChannel: string,
    connected: boolean,
    whoami?: {
      id: string,
      username: string,
      instance: string
    },
    chatPaneRef: React.Ref<HTMLDivElement>
  }
}) {
  const [menuOpen, setMenuOpen] = useState<boolean>(false);
  const router = useRouter();
  
  return (
    <div className={`${styles.ChatLayout}`}>
      <aside className={`${styles.ChatLayout_Aside} ${menuOpen ? styles.Modifier_Open : ""}`}>
        <h1 style={{marginBottom:0}}>Chat</h1>
        <p>
          <button
            onClick={() => router.back()}
          >
            &lt; abtmtr.link
          </button>
        </p>
        <hr />
        <ConditionalNull condition={props?.connected == true && props?.channels != null}>
          <p>Channels</p>
          <div className={styles.Main_List}>
            {props?.channels?.map((channel) => (<button 
              onClick={channel.action}
              className={props.currentChannel === channel.name ? styles.Main_List_CurrentLink : ""}
              title={`#${channel.name}`}
              key={channel.name}
            >
              <div className={`fw ${styles.Main_List_Button}`}>
                  <ConditionalNull condition={props.channelIndicators[channel.name]}>
                    <span className="icon" style={{
                      position: "absolute",
                      left: 8
                    }}>
                      arrow_right
                    </span>
                  </ConditionalNull>
                  <span className="icon">
                    tag
                  </span>
                  <span>{channel.name}</span>
              </div>
            </button>))}
          </div>
        </ConditionalNull>
        <ConditionalNull condition={
          props?.connected == true && props?.channels != null
          && props?.connected == true && props?.users != null
        }>
          <hr />
        </ConditionalNull>
        <ConditionalNull condition={props?.connected == true && props?.users != null}>
          <p>Users</p>
          <div className={styles.Main_List}>
            {props?.users.map((user) => (<Link 
              href={`/jams/user/${user?.id}`}
              className={props.whoami?.id === user?.id ? styles.Main_List_CurrentLink : ""}
              title={`${user?.username}@${user?.instance}`}
              key={user?.id}
            >
              <div className={`fw ${styles.Main_List_Button}`}>
                  <span className="icon">person</span>
                  <span>{user?.username}@{user?.instance}</span>
              </div>
            </Link>))}
          </div>
        </ConditionalNull>
        <ConditionalNull condition={
          props?.connected == true && props?.users != null
        }>
          <hr />
        </ConditionalNull>
        <p>Chat API v2</p>
        <p><i>made with hate for React<br />and love for irisnk.me</i></p>
      </aside>
      <div className={styles.ChatLayout_Inner}>
        <div className={`${
          styles.ChatLayout_Inner_Header
        } ${
          backButton ? styles.Modifier_Back : ""
        }`}>
          <ConditionalNull condition={!backButton}>
            <div className={`${styles.ChatLayout_Inner_Header_Back} ${styles.ChatLayout_Inner_Header_Menu}`}>
              <button className={styles.ChatLayout_Inner_Header_Back_Button} onClick={() => setMenuOpen(!menuOpen)}>
                menu
              </button>
            </div>
          </ConditionalNull>
          <ConditionalNull condition={backButton}>
            <div className={styles.ChatLayout_Inner_Header_Back}>
              <button className={styles.ChatLayout_Inner_Header_Back_Button} onClick={() => router.back()}>
                arrow_back
              </button>
            </div>
          </ConditionalNull>
          <div className={styles.ChatLayout_Inner_Header_Title}>
            <h1>{title}</h1>
            <span>{subtitle}</span>
          </div>
        </div>
        <main className={styles.ChatLayout_Inner_Main} ref={props?.chatPaneRef}>
          <div className={`${styles.ChatLayout_Inner_Main_Content} MainContent`}>
            {children}
          </div>
        </main>
        <div className={`${styles.ChatLayout_Inner_Footer}`}>
          {footerChildren}
        </div>
      </div>
    </div>
  )
}