import { GroupOutlined, PlusOutlined, SearchOutlined } from '@ant-design/icons';
import styled from '@emotion/styled';
import {
  deserializePB,
  Element,
  getEditorName,
  useBuilder,
  useEditor,
} from '@tempi/core-editor';
import {
  DEFAULT_POPUP_V1,
  PopupEditorV1,
  PopupV1Interface,
} from '@tempi/core-elements';
import { PageBuilderResponse, ROOT, BUBBLE } from '@tempi/core-renderer';
import {
  Col,
  Input,
  List as AntdList,
  Modal,
  Row,
  Spin,
  Typography,
} from 'antd';
import defaultImage from 'assets/images/default_image.jpg';
import React, { useEffect, useMemo, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { usePopupsForEditor } from '../../hooks';
import { Popup } from '../../types';
import { checkNodePopupIsMain, getNewPopupName } from '../../utils';

export const PopupSelection: React.FC = () => {
  const { t } = useTranslation();
  const [keyword, setKeyword] = useState('');
  const [selectedCat, setSelectedCat] = useState<number>();
  const [popups, setPopups] = useState<Popup[]>([]);
  const [loading, setLoading] = useState(false);
  const {
    showModalSelectPopup: visible,
    setShowModalSelectPopup: setVisible,
    relatedNodeId,
    setRelatedNodeId,
  } = useBuilder<any>();
  const { query, actions, nodes } = useEditor((state) => ({
    nodes: state.nodes,
  }));
  const { fetchPopupData, dataSelectPopup: categories } = usePopupsForEditor();

  const { addBlock } = useEditor();

  const onSelectPopup = async (
    data?: PageBuilderResponse<{ popupv1: PopupV1Interface }>,
  ) => {
    if (!!data) {
      let newData = { ...data };
      const selectedPopup = Object.entries(data).find(
        ([, value]) => value.resolvedName === getEditorName({ PopupEditorV1 }),
      );

      if (!!selectedPopup) {
        const [selectedPopupKey, selectedPopupValue] = selectedPopup;

        const oldName = selectedPopupValue?.customAttributes?.popupv1?.name;
        const newName = getNewPopupName(nodes, query, oldName);
        selectedPopupValue.customAttributes.popupv1.name = newName;

        newData = {
          ...data,
          ...{ [selectedPopupKey]: selectedPopupValue },
        };
      }

      const node = deserializePB(newData);
      const newNode = await addBlock(node as any);
      actions.selectNode(newNode.rootNodeId);
      if (relatedNodeId.componentId === BUBBLE) {
        setRelatedNodeId((prev) => ({
          ...prev,
          popupId: newNode.rootNodeId,
        }));
      }
    }
  };

  const handleSelectPopup = async (id?: number) => {
    if (!!id) {
      try {
        setLoading(true);
        const data = await fetchPopupData(id);
        onSelectPopup(data);
        setVisible(false);
      } finally {
        setLoading(false);
      }
    }
  };

  useEffect(() => {
    if (categories.length > 0) {
      const cat =
        categories.find((el) => el.id === selectedCat) || categories[0];
      setPopups(cat.popups);
    }
    // eslint-disable-next-line
  }, [selectedCat]);

  useEffect(() => {
    if (categories.length > 0) {
      setSelectedCat(categories[0].id);
    }
    // eslint-disable-next-line
  }, [JSON.stringify(categories)]);

  const displayPopups = useMemo(() => {
    return popups.filter((el) =>
      el.name.toLowerCase().includes(keyword?.toLowerCase()?.trim()),
    );
  }, [keyword, popups]);

  const handleSelectBlankPopup = () => {
    const name = getNewPopupName(nodes, query);
    const node = query
      .parseReactElement(
        <Element
          canvas
          {...{ ...DEFAULT_POPUP_V1, name }}
          is={PopupEditorV1}
        />,
      )
      .toNodeTree();
    // hide all popups before add a new popup
    nodes[ROOT]?.data.nodes.forEach((key) => {
      if (
        nodes[key].data.name === getEditorName({ PopupEditorV1 }) &&
        !checkNodePopupIsMain(nodes[key] as any)
      ) {
        actions.setHidden(nodes[key].id, true);
      }
    });

    actions.addNodeTree(node, ROOT);
    actions.selectNode(node.rootNodeId);
    if (relatedNodeId.componentId === BUBBLE) {
      setRelatedNodeId((prev) => ({
        ...prev,
        popupId: node.rootNodeId,
      }));
    }
    setVisible(false);
  };

  return (
    <StyledModal
      title={null}
      footer={null}
      open={visible}
      closable={false}
      onCancel={() => setVisible(false)}
      width={1120}
      centered
      zIndex={2002}
    >
      <Spin spinning={loading}>
        <Row style={{ height: '100%' }}>
          <Col span={6}>
            <LeftWrapper>
              <StyledInput
                bordered={false}
                placeholder={t('popup.templates.input_placeholder')}
                prefix={
                  <SearchOutlined
                    style={{
                      marginLeft: 20,
                      marginRight: 12,
                      color: '#727586',
                    }}
                  />
                }
                value={keyword}
                onChange={(e) => setKeyword(e.target.value)}
                size="large"
              />
              <AntdList
                style={{
                  marginLeft: 24,
                  paddingRight: 24,
                  height: 600,
                  overflow: 'auto',
                }}
                itemLayout="horizontal"
                split={false}
                dataSource={categories}
                renderItem={(item) => (
                  <StyledListItem
                    className={item.id === selectedCat ? 'active' : ''}
                    onClick={() => setSelectedCat(item.id)}
                  >
                    <AntdList.Item.Meta title={item.name} />
                    <div>{item?.popups.length}</div>
                  </StyledListItem>
                )}
              />
            </LeftWrapper>
          </Col>
          <Col span={18}>
            <Typography.Title
              level={4}
              style={{
                textAlign: 'center',
                marginTop: 12,
              }}
            >
              <GroupOutlined /> {t('popup.templates.title')}
            </Typography.Title>
            <RightWrapper>
              <StyledMasonry>
                <Card onClick={handleSelectBlankPopup}>
                  <div className="overlay">{t('BlankPopup')}</div>
                  <Blank>
                    <PlusOutlined style={{ fontSize: 100 }} />
                  </Blank>
                </Card>
                {displayPopups.map((popup) => (
                  <Card
                    key={popup.id}
                    onClick={() => handleSelectPopup(popup.id)}
                  >
                    <div className="overlay">{popup.name}</div>
                    <Thumbnail
                      src={popup.thumbnailUrl || defaultImage}
                      alt="example"
                    />
                  </Card>
                ))}
              </StyledMasonry>
            </RightWrapper>
          </Col>
        </Row>
      </Spin>
    </StyledModal>
  );
};

const StyledModal = styled(Modal)`
  .ant-modal-body {
    padding: 0;
  }
`;

const LeftWrapper = styled.div`
  height: 100%;
`;

const StyledInput = styled(Input)`
  padding: 12px 0;
`;

const StyledListItem = styled(AntdList.Item)`
  cursor: pointer;
  &:hover * {
    opacity: 1;
  }
  &.active * {
    color: #3dbfe8;
    opacity: 1;
  }
  * {
    color: #ffffff;
    opacity: 0.9;
  }
`;

const RightWrapper = styled.div`
  padding: 12px;
  height: 600px;
  overflow: auto;
`;

const StyledMasonry = styled.div`
  column-count: 3;
  column-gap: 16px;
`;

const Card = styled.div`
  width: 100%;
  cursor: pointer;
  position: relative;
  margin: 8px 0;
  display: inline-block;
  box-shadow: 0 2px 10px rgb(6 21 40 / 15%);
  & .overlay {
    opacity: 0;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #151515c2;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.4s;
  }
  &:hover .overlay {
    opacity: 1;
  }
`;

const Blank = styled.div`
  width: 100%;
  height: 150px;
  background: #d7d7d7;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
`;

const Thumbnail = styled.img`
  width: 100%;
`;