import { Select, Tooltip } from 'component/antd';
import { urlPrefix } from 'constants/left-menu';
import { ITopic } from 'types/base-type';
import { topic } from 'store/topic';
import { updateAllTopicFormModal } from '../modal/topic';
import { searchProps } from 'constants/table';
import * as React from 'react';

const Option = Select.Option;

interface IStaffSelectProps {
  parameter?: ITopic;
  selectData?: any[];
  onChange?: (result: string) => any;
  value?: string;

}

export class TopicAppSelect extends React.Component<IStaffSelectProps> {

  public render() {
    const { value, selectData } = this.props;
    const query = `application=1`;

    let appId: string = null;
    const index = Array.isArray(selectData) ? selectData.findIndex(row => row.appId === value) : -1;
    appId = index > -1 ? value : selectData && selectData.length ? selectData[0].appId : '' ;

    return (
      <>
        <Select
          placeholder="请选择"
          defaultValue={appId}
          onChange={(e: string) => this.handleChange(e)}
          {...searchProps}
        >
          {selectData.map((d: any) => {
            const label = `${d.name}（${d.appId}）`;
            return (<Option value={d.appId} key={d.appId}>
              {label.length > 25 ? <Tooltip placement="bottomLeft" title={label}>{label}</Tooltip> : label}
            </Option>);
          })}
        </Select>
        {
          selectData.length ? null : <i>
            没有应用？
            <a href={`${urlPrefix}/topic/app-list?${query}`}>立刻创建</a>
          </i>}
      </>
    );
  }

  public handleChange(params: string) {
    const { onChange, parameter } = this.props;
    topic.getAuthorities(params, parameter.clusterId, parameter.topicName).then(() => {
      updateAllTopicFormModal();
    });
    // tslint:disable-next-line:no-unused-expression
    onChange && onChange(params);
  }
}