import styled from '@emotion/styled';
import { GlobalToken } from 'antd/es/theme/interface';
import React, { useCallback, useEffect, useState } from 'react';
import { CopyOutlined, DeleteOutlined } from '@ant-design/icons';
import { Button, Modal, theme, Typography } from 'antd';
import { WindowMultipleFilled } from '@fluentui/react-icons';
import { checkNodePopupIsMain } from 'modules/popup/utils';
import { useBuilder, useEditor, getEditorName } from '@tempi/core-editor';
import { PopupEditorV1 } from '@tempi/core-elements';
import { ROOT } from '@tempi/core-renderer';
import {
  SidebarDrawer,
  SidebarItem,
  SideBarMenuProps,
  t,
} from '@tempi/editor-site';

export const PopupMenu: React.FC<SideBarMenuProps> = ({
  title = 'Popup',
  description,
  disabled,
}) => {
  const {
    setDraggingNode,
    getAttrTracking,
    openElementMenu,
    setShowModalSelectPopup,
  } = useBuilder();
  const [open, setOpen] = useState(false);
  const { useToken } = theme;
  const { token: themeToken } = useToken();
  const { query, actions, nodes } = useEditor((state) => {
    return {
      nodes: state.nodes,
      enabled: state.options.enabled,
    };
  });
  const allStandalonePopupIds = [
    ...new Set(
      nodes[ROOT]?.data.nodes.filter(
        (key) =>
          nodes?.[key]?.data?.name === getEditorName({ PopupEditorV1 }) &&
          !checkNodePopupIsMain(nodes[key] as any),
      ),
    ),
  ];
  const handleCloseDrawer = useCallback(() => {
    setDraggingNode(undefined);
    setOpen(false);
  }, [setDraggingNode]);
  const handleClickPopupItem = (id) => {
    // hide all popups before select a popup
    allStandalonePopupIds.forEach((popupId) => {
      actions.setHidden(popupId, true);
    });
    actions.setHidden(id, false);
    actions.selectNode(id);
    handleCloseDrawer();
  };
  const handleDeletePopup = (id: string) => {
    const name = nodes[id]?.data?.props?.name ? (
      <strong>{nodes[id]?.data?.props?.name}</strong>
    ) : (
      t('này')
    );
    Modal.confirm({
      title: t('Thông báo'),
      content: (
        <div>
          {t('Bạn muốn xóa popup')}
          {name} ?
        </div>
      ),
      closable: true,
      maskClosable: true,
      okText: t('Xóa'),
      cancelText: t('common.cancel'),
      onOk: () => actions.delete(id),
    });
  };
  const renderPopupList = () => {
    if (!allStandalonePopupIds?.length) return null;
    return (
      <PopupList>
        {allStandalonePopupIds.map((id) => (
          <PopupBtn key={id} onClick={() => handleClickPopupItem(id)}>
            <PopupTitle>
              <CopyOutlined style={{ marginRight: 8 }} />
              {query.node(id).get()?.data?.props?.name || id}
            </PopupTitle>
            <PopupDeleteBtn
              onClick={(e) => {
                e.stopPropagation();
                handleDeletePopup(id);
              }}
            >
              <DeleteOutlined />
            </PopupDeleteBtn>
          </PopupBtn>
        ))}
      </PopupList>
    );
  };
  useEffect(() => {
    if (openElementMenu) setOpen(false);
  }, [openElementMenu]);
  return (
    <>
      <SidebarItem
        onClick={() => setOpen(true)}
        trackingContentName={'PopupBtn'}
        active={open}
        tooltip="Popup"
        disabled={disabled}
      >
        <WindowMultipleFilled
          color={themeToken.colorTextSecondary}
          style={{ fontSize: 24 }}
        />
      </SidebarItem>
      <SidebarDrawer
        title={title}
        open={open}
        onClose={() => {
          setOpen(false);
        }}
      >
        <>
          {!!description && <Typography.Text>{description}</Typography.Text>}
          <Button
            className="mt-half"
            type="primary"
            block
            onClick={() => {
              setShowModalSelectPopup(true);
            }}
            {...getAttrTracking({
              regionName: 'addComponentMenu',
              contentName: 'addPopupBtn',
            })}
          >
            {t('Thêm popup')}
          </Button>
          {renderPopupList()}
        </>
      </SidebarDrawer>
    </>
  );
};
const PopupList = styled.div`
  display: flex;
  flex-wrap: wrap;
  margin-top: 16px;
`;
const PopupBtn = styled.div`
  cursor: pointer;
  width: 100%;
  padding: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: flex;
  border-radius: 4px;
`;
const PopupTitle = styled.div<{
  theme?: GlobalToken;
}>(
  ({ theme }) => `
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  &:hover {
    color: ${theme.colorPrimary} !important;
    path[stroke],
    rect[stroke],
    line {
      stroke: ${theme.colorPrimary} !important;
    }
    path:not([stroke]),
    rect:not([stroke]) {
      fill: ${theme.colorPrimary} !important;
    }
  }
`,
);
const PopupDeleteBtn = styled.div<{
  theme?: GlobalToken;
}>(
  ({ theme }) => `
  cursor: pointer;
  padding: 8px;
  display: flex;
  gap: 4px;
  align-items: center;
  justify-content: flex-end;
  &:hover {
    color: ${theme.colorPrimary} !important;
    path[stroke],
    rect[stroke],
    line {
      stroke: ${theme.colorPrimary} !important;
    }
    path:not([stroke]),
    rect:not([stroke]) {
      fill: ${theme.colorPrimary} !important;
    }
  }
`,
);