import { t } from '../../../../i18n';
import React, { useEffect, useState } from 'react';
import styled from '@emotion/styled';
import { FloatingWrapper } from './FloatingWrapper';
import { Tabs } from 'antd';
import { useEditor, useBuilder } from '@tempi/core-editor';
const StyledTabs = styled(Tabs)`
  .ant-tabs-nav {
    margin-bottom: 0 !important;
    margin-left: 12px;
    margin-right: 12px;
  }
`;
const TabContent = styled.div`
  height: 65vh;
  overflow-y: auto;
  padding: 8px 12px;
`;
export const SettingFloating = () => {
  const { showSettingDialog, setShowSettingDialog, hideAdvancedSetting } =
    useBuilder();
  const [tabActive, setTabActive] = useState('0');
  const {
    customAttributes,
    commonAttributes,
    advanceAttributes,
    effectAttributes,
    selectedId,
    displayName,
    query: { node },
  } = useEditor((state) => {
    const selectedId = state.events.selected.values().next().value;
    const selectedNode = state.nodes[selectedId];
    const customAttributes = selectedNode?.related?.customAttributes as any;
    const commonAttributes = selectedNode?.related?.commonAttributes as any;
    const advanceAttributes = selectedNode?.related?.advanceAttributes as any;
    const effectAttributes = selectedNode?.related?.effectAttributes as any;
    const name = selectedNode?.data.name;
    const displayName = selectedNode?.data.displayName;
    return {
      selectedId,
      customAttributes,
      commonAttributes,
      selectedNode,
      advanceAttributes,
      effectAttributes,
      name,
      displayName,
    };
  });
  const contentTab = {
    title: t('Nội dung'),
    content: customAttributes,
  };
  const styleTab = {
    title: t('Kiểu'),
    content: commonAttributes,
  };
  const advancedTab = {
    title: t('Nâng cao'),
    content: advanceAttributes,
  };
  const effectTab = {
    title: t('Hiệu ứng'),
    content: effectAttributes,
  };
  const tabs: {
    title: string;
    content: React.FC;
  }[] = [
    customAttributes && contentTab,
    commonAttributes && styleTab,
    effectAttributes && effectTab,
    advanceAttributes && !hideAdvancedSetting && advancedTab,
  ];
  const isShow = () => {
    if (!showSettingDialog || !selectedId || node(selectedId).isRoot())
      return false;
    return true;
  };
  const handleCloseSetting = () => {
    setShowSettingDialog(false);
  };
  useEffect(() => {
    setTabActive('0');
    if (selectedId && node(selectedId).isRoot()) {
      setShowSettingDialog(false);
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [selectedId]);
  return (
    <FloatingWrapper
      nodeId="sideBarDnd"
      style={{
        display: isShow() ? 'block' : 'none',
        zIndex: 1080,
      }}
      onClose={handleCloseSetting}
      title={displayName}
    >
      <StyledTabs
        onChange={(activeKey) => setTabActive(activeKey)}
        activeKey={tabActive}
        items={tabs.filter(Boolean).map((tab, index) => {
          return {
            label: tab.title,
            key: index.toString(),
            children: (
              <TabContent>{React.createElement(tab.content)}</TabContent>
            ),
          };
        })}
      />
    </FloatingWrapper>
  );
};