import { AsidePanelInform } from "../../../../../../../../../../ui/molecules";
import { Avatar } from "../../../../../../../../../../ui/atoms";
import {
  ColumnView,
  SearchBlack
} from "../../../../../../../../../../ui/icons";
import { oc } from "ts-optchain";
import {
  selectHistorySelectedChannelChanged,
  selectHistorySelectedUserIdChanged
} from "../../../../../../../../redux/selectors";
import {
  useHistoryMessagesGetUserInformQuery,
  GetUsersForHistoryChannelPreviewDocument
} from "./index.generated";
import { useSelector } from "react-redux";
import React, { useEffect, useState } from "react";
import UserDetails from "../UserDetails";
import css from "./index.module.css";
import gql from "graphql-tag";
import { ChannelKindEnum } from "../Messages/index.generated";

const UserPreview = () => {
  const [informPanelOpened, setInformPanel] = useState<boolean>(false);
  const [users, setUsers] = useState();
  const selectedUserId = useSelector(selectHistorySelectedUserIdChanged);
  const { data, client } = useHistoryMessagesGetUserInformQuery({
    variables: {
      userID: selectedUserId
    }
  });
  const selectedChannel = useSelector(selectHistorySelectedChannelChanged);
  const userIDs = oc(selectedChannel).userIDs();
  const chnlKind = oc(selectedChannel).kind();
  const chnlName = oc(selectedChannel).name();

  useEffect(() => {
    if (data && !Array.isArray(users) && Array.isArray(userIDs)) {
      client
        .query({
          query: GetUsersForHistoryChannelPreviewDocument,
          variables: userIDs
        })
        .then(data => {
          const usersInfo = oc(data).data.user.list();

          if (usersInfo) {
            setUsers(usersInfo);
          }
        });
    }
  }, [data, client, users, setUsers, userIDs]);
  /**TODO вынести определение имени в отдельную проверку */
  const user = oc(data).user.get();
  let userName =
    user &&
    (user.firstName && user.lastName
      ? `${user.firstName} ${user.lastName}`
      : user.username);

  let channelName: string = "";
  let avatarName: string = "";

  if (
    chnlKind === ChannelKindEnum.ChannelKindUser &&
    Array.isArray(users) &&
    users.length
  ) {
    const names = users.reduce(
      (acc, item) => {
        const avatarName = item.firstName || item.username;
        const channelName =
          [item.firstName, item.lastName].filter(Boolean).join(" ") ||
          item.username;

        return {
          avatarName:
            acc.avatarName.length > 0
              ? [acc.avatarName, avatarName].join(" ")
              : avatarName,
          channelName:
            acc.channelName.length > 0
              ? [acc.channelName, channelName].join(" - ")
              : channelName
        };
      },
      { avatarName: "", channelName: "" }
    );

    channelName = names.channelName;
    avatarName = names.avatarName;
  } else if (
    chnlKind === ChannelKindEnum.ChannelKindUserGroup &&
    !selectedUserId
  ) {
    userName = chnlName as string;
  }

  return (
    <>
      {informPanelOpened && (
        <AsidePanelInform closePanel={() => setInformPanel(false)}>
          <UserDetails onClose={setInformPanel} />
        </AsidePanelInform>
      )}
      <div className={css.container}>
        <div className={css.avatar}>
          <Avatar
            height={40}
            id={
              selectedUserId
                ? selectedUserId
                : selectedChannel
                ? selectedChannel.channelID
                : ""
            }
            image={user ? user.avatar : ""}
            name={userName || avatarName}
            width={40}
          />
        </div>

        <div className={css.userName}>{userName || channelName}</div>
        <div className={css.buttonsGroup}>
          <button className={css.button} type="button">
            <SearchBlack />
          </button>
          {selectedUserId && (
            <button
              className={css.button}
              onClick={() => setInformPanel(true)}
              type="button"
            >
              <ColumnView />
            </button>
          )}
        </div>
      </div>
    </>
  );
};

gql`
  query HistoryMessagesGetUserInform($userID: ID) {
    user {
      get(userID: $userID) {
        avatar
        id
        userID
        firstName
        lastName
        username
      }
    }
  }
`;

gql`
  query GetUsersForHistoryChannelPreview($userIDs: [String!]!) {
    user {
      list(userIDs: $userIDs) {
        avatar
        firstName
        lastName
        id
        username
      }
    }
  }
`;

export default UserPreview;