import React from 'react';
import { useBuilder, useEditor, FormItem } from '@tempi/core-editor';
import { ChatMultipleFilled } from '@fluentui/react-icons';
import { Badge, Switch, theme, Typography } from 'antd';
import { BUBBLE, ROOT } from '@tempi/core-renderer';
import { ContactBubbleEditor } from '@tempi/core-elements';
import set from 'lodash.set';
import {
  SidebarDrawer,
  SidebarItem,
  SideBarMenuProps,
  t,
} from '@tempi/editor-site';
export const ContactBubbleMenu: React.FC<SideBarMenuProps> = ({ disabled }) => {
  const {
    hideBubbleOnEditor,
    setHideBubbleOnEditor,
    showBubbleSetting,
    setShowBubbleSetting,
  } = useBuilder();
  const { query, nodes, actions } = useEditor((state) => {
    return {
      nodes: state.nodes,
    };
  });
  const isExistBubble = Object.keys(nodes).includes(BUBBLE);
  const { token } = theme.useToken();
  const { node } = query;
  const isEnabled = node(BUBBLE)?.get()?.data?.props?.enable || false;
  const contactBubbleSetting =
    node(BUBBLE)?.get()?.related?.customAttributes &&
    React.createElement(node(BUBBLE)?.get()?.related?.customAttributes);
  const onChangeBubbleProps = (key: string, value) => {
    actions.history.ignore().setProp(BUBBLE, (props) => {
      set(props, key, value);
    });
  };
  const handleSwitch = (checked: boolean) => {
    if (checked) {
      if (!isExistBubble) {
        const newNodeTree = query
          .parseReactElement(<ContactBubbleEditor />)
          .toNodeTree((node) => {
            node.id = BUBBLE;
          });
        actions.addNodeTree(newNodeTree, ROOT);
      }
      onChangeBubbleProps('enable', true);
    } else {
      onChangeBubbleProps('enable', false);
    }
  };
  return (
    <>
      <Badge dot>
        <SidebarItem
          onClick={() => setShowBubbleSetting(true)}
          trackingContentName="ContactBubbleBtn"
          tooltip={t('Bong bóng liên hệ')}
          active={showBubbleSetting}
          disabled={disabled}
        >
          <ChatMultipleFilled color={token.colorTextSecondary} fontSize={24} />
        </SidebarItem>
      </Badge>
      <SidebarDrawer
        title={t('Bong bóng liên hệ')}
        open={showBubbleSetting}
        onClose={() => {
          setShowBubbleSetting(false);
        }}
        width={320}
      >
        <Typography.Text style={{ color: '#434657' }}>
          {t(
            'Thêm các nút liên hệ vào website giúp khách hàng dễ dàng liên hệ với bạn',
          )}
        </Typography.Text>
        <FormItem
          label={t('Bật tính năng bong bóng liên hệ')}
          style={{ marginTop: '1em' }}
        >
          <Switch checked={isEnabled} onChange={handleSwitch} />
        </FormItem>
        {isEnabled && (
          <FormItem label={t('Ẩn trên trình kéo thả')}>
            <Switch
              checked={hideBubbleOnEditor}
              onChange={setHideBubbleOnEditor}
            />
          </FormItem>
        )}
        <Typography.Text type="warning" style={{ marginBottom: 4 }}>
          {t('Bạn cần cấu hình cho cả máy tính và điện thoại')}
        </Typography.Text>
        {contactBubbleSetting}
      </SidebarDrawer>
    </>
  );
};