import '@wangeditor/editor/dist/css/style.css';
import { Col, Radio, Row, Space } from 'antd';
import { forwardRef, useContext, useImperativeHandle, useState } from 'react';
import { FormattedMessage } from 'umi';
import AppInfoDescriptions from '../AppInfoDescriptions';
import UserSelectList from '../UserSelect/list';
import UserSuperiorName from '../UserSuperior/name';
import UserSuperiorTime from '../UserSuperior/time';
import { formatUserRender } from '../utils';
import { AppDetailContext } from '../utils/hooks';

export interface NavProps {
  value: 1 | 2;
  setValue: (v: 1 | 2) => void;
  /** 多个申请、单个、运营端配置*/
  type?: 'multiple' | 'single' | 'operation';
  currentUser?: API.CurrentUser;
}

export interface NavRef {
  reset: () => void;
  getType: () => number;
  getOtherUsers: () => any[];
}

const Nav = forwardRef<NavRef, NavProps>((props, ref) => {
  const { value, setValue, type = 'single', currentUser } = props;
  const [list, setList] = useState([]);
  const appDetail = useContext(AppDetailContext);

  useImperativeHandle(ref, () => ({
    reset: () => {
      setList([]);
      setValue(1);
    },
    getType: () => value,
    getOtherUsers: () => list,
  }));

  const selfRender = () => (
    <Space direction="vertical" style={{ width: '100%' }}>
      <Row>
        <Col flex="100px">
          <div className="apply-detail-nav-label">
            <FormattedMessage id="component.ApplyDetail.nav.title.current.user" />
          </div>
        </Col>
        <Col flex="auto">
          {formatUserRender({
            account: currentUser?.nameEn,
            state: currentUser?.state,
            name: currentUser?.nameZh,
          })}
        </Col>
      </Row>
      <Row>
        <Col flex="100px">
          <div className="apply-detail-nav-label">
            <FormattedMessage id="component.ApplyDetail.nav.title.other.user" />
          </div>
        </Col>
        <Col flex="auto">
          <UserSuperiorName />
        </Col>
      </Row>
      <UserSuperiorTime />
    </Space>
  );

  const otherRender = () => (
    <Space direction="vertical" style={{ width: '100%' }}>
      <div className="apply-detail-nav-label">
        <FormattedMessage id="component.ApplyDetail.nav.other.user" />
      </div>
      <UserSelectList value={list} onChange={setList} state={1} />
    </Space>
  );

  return (
    <Space direction="vertical">
      {type === 'single' && (
        <div>
          <Radio.Group onChange={(e) => setValue(e.target.value)} value={value}>
            <Radio value={1}>
              <FormattedMessage id="component.ApplyDetail.nav.current.user.title" />
            </Radio>
            <Radio value={2}>
              <FormattedMessage id="component.ApplyDetail.nav.other.user.title" />
            </Radio>
          </Radio.Group>
        </div>
      )}

      {value === 1 ? selfRender() : otherRender()}
      {/* <div className="apply-detail-nav-label">{appDetail?.name}</div>
      <div>{appDetail?.intro}</div> */}
      {type === 'single' && (
        <>
          <AppInfoDescriptions
            appId={appDetail?.id}
            column={1}
            title={<FormattedMessage id="base.app.detail" />}
          />
          <div className="apply-detail-nav-label">
            <FormattedMessage id="component.ApplyDetail.nav.app.detail" />
          </div>
          <div className="w-e-text-container">
            <div
              data-slate-editor
              style={{ maxHeight: 500, width: 394, overflow: 'auto' }}
              dangerouslySetInnerHTML={{
                __html: appDetail?.applyInstructions,
              }}
            />
          </div>
        </>
      )}
    </Space>
  );
});

export default Nav;