import * as React from 'react';
import { Popover, message } from 'antd';
import { observer } from 'mobx-react';
import { forwardRef } from 'react';
import { CaretDownOutlined } from '@ant-design/icons';
import styles from './index.less';
import { Session, Text } from '@/utils';
import classNames from 'classnames';
import defaultLogo from '@/assets/logo.svg';

declare type ComponentProps = {
  collapsed: boolean;
};

export const MenuHeader = observer(({ collapsed }: ComponentProps) => {
  const user = Session.get();

  return (
    <Popover
      title={'切换组织'}
      content={() => <Menu />}
      placement="rightBottom"
      trigger="click"
      overlayClassName={styles.overlay}
      overlayInnerStyle={{ borderRadius: 8 }}
    >
      <div className={styles.btn}>
        <Item
          data={{ title: user.orgName, company: user.companyName }}
          collapsed={collapsed}
        />
      </div>
    </Popover>
  );
});

const Menu = observer(
  forwardRef((props, ref) => {
    return (
      <div className={styles.menu}>
      </div>
    );
  }),
);

interface ItemProps {
  collapsed: boolean;
  data: any;
}

const Item = observer(({ data = {}, collapsed }: ItemProps) => {
  const classes = classNames({
    [styles['item']]: true,
  });

  if (collapsed) {
    return (
      <div className={classes}>
        <div className={styles.logo}>
          <img src={data.logo || defaultLogo} />
        </div>
      </div>
    );
  }

  return (
    <div className={classes}>
      <div className={styles.logo}>
        <img src={data.logo || defaultLogo} />
      </div>
      <div className={styles.content}>
        <div className={styles.label}>
          <div className={styles.title}>{Text.toShortText(data.title)}</div>
        </div>
        <div className={styles.description}>
          <div className={styles.message}>{Text.toShortText(data.company)}</div>
        </div>
      </div>
      <div className={styles.icon}>
        <CaretDownOutlined />
      </div>
    </div>
  );
});
