import { Message, MessageSemantic, Semantic } from "@komi-app/creator-ui";
import When from "@komi-app/when";
import Each from "@komi-app/each";
import { Button, Col, Row } from "antd";
import TikTokVideoCardModule from "components/TikTokVideoCardModule";
import { Text } from "components/Typography";
import { useTikTokAccounts } from "hooks/integrations/useTikTokAccounts";
import React, { useCallback, useMemo } from "react";
import { useHistory } from "react-router-dom";
import { Icon } from "../../../components/Icon";
import { Paragraph } from "../../../components/Typography";
import ModuleEditor from "../ModuleEditor";
import { ModuleTikTokAutomationProps } from "./ModuleTikTokAutomation";
import { useModules } from "hooks/useModules";
import { getShortVideoService } from "services";
import { routes, ShortVideoPage } from "../AddShortVideo/routes";
import { ReconnectTikTokPrompt } from "components/ReconnectTikTokPrompt";

const ModuleTikTokFullyAutomated: React.FC<ModuleTikTokAutomationProps> = ({
  module,
  dragHandleProps,
  active,
}) => {
  const automationItem = module.items.length > 0 ? module.items[0] : undefined;

  const navigate = useHistory();
  const { removeModule } = useModules();

  const tiktokList = useMemo(
    () => automationItem?.links || [],
    [automationItem?.links]
  );

  const { data: accounts, isLoading } = useTikTokAccounts();
  const moduleAccount = useMemo(
    () =>
      accounts?.find(
        (account) => account.platformId === automationItem?.tiktokAccountId
      ),
    [accounts, automationItem?.tiktokAccountId]
  );
  const accountUsername = moduleAccount?.name || "TikTok";
  const accountDisconnected = !isLoading && !moduleAccount;

  const onEditModule = useCallback(() => {
    navigate.push(
      `/admin/modules/tiktok${routes[ShortVideoPage.AUTOMATION_EDIT]}?id=${module.id}`
    );
  }, [module.id, navigate]);

  const onDeleteModule = useCallback(() => {
    removeModule && removeModule(module);
  }, [module, removeModule]);

  const onAddVideos = useCallback(() => {
    onDeleteModule();
    navigate.push(`/admin/modules/tiktok`);
  }, [onDeleteModule, navigate]);

  const renderContent = () => {
    if (!module.items.length) {
      return (
        <React.Fragment>
          <Row justify="center">
            <Col span={24} className="text__align--center">
              <Icon name="empty-module" />
            </Col>
            <Col span={24} className="text__align--center max-w-393">
              <Paragraph preset="semibold18" className="d--block m__b--4">
                Nothing Here Yet
              </Paragraph>
              <Paragraph preset="regular14" className="d--block text--grey4">
                Click the button below to get started
              </Paragraph>
            </Col>
            <Col span={24} className="height--32 m__t--20">
              <Row justify="center">
                <Button
                  className="add-item-btn p--0"
                  type="link"
                  onClick={onAddVideos}
                >
                  <div className="d--flex justify__content--center align__items--center">
                    <Icon name="add-blue" />
                    <Text preset="semibold18" className="text--blue m__l--4">
                      Add Videos
                    </Text>
                  </div>
                </Button>
              </Row>
            </Col>
          </Row>
        </React.Fragment>
      );
    }

    return (
      <React.Fragment>
        <When
          value={accountDisconnected}
          then={<ReconnectTikTokPrompt />}
          otherwise={
            <Message
              semantic={MessageSemantic.DEFAULT}
              text="This module syncs latest videos automatically. To add individual videos, create a new TikTok module."
            />
          }
        />

        <Row align="middle" justify="space-between" className="m__y--8">
          <Col className="height--32">
            <Text preset="semibold18" className="text--default">
              Latest Videos
            </Text>
          </Col>
          <Col>
            <Button
              className="p--0 d--flex align__items--center height--24 min-h-auto ant-btn-black"
              type="link"
              onClick={onDeleteModule}
            >
              <Icon name="trash" />
            </Button>
          </Col>
        </Row>
        <div className="border-box border__radius--8 p--16">
          <Row align="middle" justify="space-between" className="m__b--8">
            <Col className="height--32">
              <Text preset="semibold16" className="text--default">
                {accountUsername}
              </Text>
            </Col>
            <Col>
              <Text preset="medium14" className="text--default opacity-6">
                {tiktokList.length}&nbsp;
                {tiktokList.length > 1 ? "videos added" : "video added"}
              </Text>
            </Col>
          </Row>
          <Each
            values={tiktokList}
            layout={(video) => (
              <div className="product-list__item">
                <TikTokVideoCardModule
                  titleShortcut
                  item={video}
                  module={module}
                  hideVisibility
                  onEdit={onEditModule}
                />
              </div>
            )}
          />
          {!active && tiktokList.length > 2 && (
            <div className="d--flex justify__content--end align__items--center m__t--20 cursor-pointer">
              <Text preset="medium14" className="opacity-6">
                +{tiktokList.length - 2} More
              </Text>
            </div>
          )}
        </div>
      </React.Fragment>
    );
  };

  return (
    <React.Fragment>
      <ModuleEditor module={module} dragHandleProps={dragHandleProps}>
        {renderContent()}
      </ModuleEditor>
    </React.Fragment>
  );
};

export default React.memo(ModuleTikTokFullyAutomated);
