import styled from '@emotion/styled';
import { Col, Menu, MenuProps, Modal, Row, Spin } from 'antd';
import { LayoutSelect } from './LayoutSelect';
import { t } from '@tempi/editor-site';
import { ItemType } from 'antd/es/menu/interface';
export type MenuItem = Required<MenuProps>['items'][number] & {
  children?:
    | ItemType[]
    | {
        key: string;
        label: string | JSX.Element;
      }[];
  type?: string;
};
interface ModalBlockSelectionProps {
  visible: boolean;
  setVisible: React.Dispatch<React.SetStateAction<boolean>>;
  loading?: boolean;
  onMenuSelected?: MenuProps['onClick'];
  menuItems?: MenuItem[];
  renderRightWrapper?: () => JSX.Element;
  selectedMenu: string;
  setSelectedMenu?: React.Dispatch<React.SetStateAction<string>>;
}
export const ModalBlockSelection = ({
  visible,
  setVisible,
  loading = false,
  onMenuSelected,
  renderRightWrapper: customRenderRightWrapper,
  selectedMenu,
  setSelectedMenu,
  menuItems = [
    {
      key: 'layout',
      label: t('Bố cục'),
    },
  ],
}: ModalBlockSelectionProps) => {
  const onClickMenuItem = onMenuSelected
    ? onMenuSelected
    : (e) => setSelectedMenu?.(e.key);
  const renderRightWrapper = customRenderRightWrapper
    ? customRenderRightWrapper
    : () => <LayoutSelect />;
  return (
    <Modal
      title={t('Bố cục và khối được xây dựng sẵn')}
      footer={null}
      open={visible}
      closable={false}
      onCancel={() => setVisible(false)}
      width="90%"
      centered
      forceRender
      zIndex={2002}
    >
      <Spin spinning={loading}>
        <Row style={{ height: '100%' }}>
          <Col span={5}>
            <LeftWrapper>
              <Menu
                onClick={onClickMenuItem}
                defaultSelectedKeys={[selectedMenu]}
                mode="inline"
                items={menuItems}
              />
            </LeftWrapper>
          </Col>
          <Col span={19}>
            <RightWrapper>{renderRightWrapper()}</RightWrapper>
          </Col>
        </Row>
      </Spin>
    </Modal>
  );
};
const LeftWrapper = styled.div`
  height: 100%;
`;
const RightWrapper = styled.div`
  padding: 12px;
  overflow: auto;
  height: 80vh;
`;