import React from 'react';
import { Renderer, RendererProps } from '../factory';
import { filter } from '../utils/tpl';
import { BaseSchema, SchemaTpl } from '../Schema';
import { getPropValue, isMobile } from '../utils/helper';
import { Icon } from '../components/icons';
import { Button, Drawer, Popover } from 'antd';
import { isNil } from 'lodash';

/**
 * Plain 纯文本渲染器
 * 文档：https://baidu.gitee.io/amis/docs/components/plain
 */
export interface PlainSchema extends BaseSchema {
  /**
   * 指定为模板渲染器。
   *
   * 文档：https://baidu.gitee.io/amis/docs/concepts/template
   */
  type: 'plain' | 'text';

  tpl?: SchemaTpl;
  text?: SchemaTpl;

  /**
   * 是否内联显示？
   */
  inline?: boolean;

  /**
   * 占位符
   * @deprecated -
   */
  placeholder?: string;
  /**
   * 请求的路径
   */
  linkUrl?: string;
  /**
   * 弹窗大小
   */
  linkSize?: string;
  /**
   * 弹窗类型 0 弹窗 1 saas tab分页调用env.onPageLink 3暂时没有
   */
  linkType?: 0 | 1 | 2;
  /**
   *  弹窗标题
   */
  linkTitle?: string
}
export interface PlainProps
  extends RendererProps,
  Omit<PlainSchema, 'type' | 'className'> {
  wrapperComponent?: any;
}

export class Plain extends React.Component<PlainProps, object> {
  static defaultProps: Partial<PlainProps> = {
    wrapperComponent: '',
    inline: true,
    placeholder: '-'
  };
  pop: any;
  state = {
    visible: false,
    openHtml: false,
  }
  // 数据格式化
  formatter = (value: string | number) => {
    const { kilobitSeparator, $schema } = this.props;
    // 增加千分分隔
    if (kilobitSeparator) {
      value = (value + '').replaceAll(',', '');
      value = value.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
    }
    return ($schema.prefix ? $schema.prefix : '') + value + ($schema.suffix ? $schema.suffix : '');
  };

  htmlPopovers(pop: any) {
    this.pop = pop
    this._poprender();
  }

  _poprender() {
    if (!this.pop) { return; }
    const value = getPropValue(this.props);
    this.pop.innerHTML = value ? this.props.env.filterHtml(value) : '-';
  }
  render() {
    const {
      className,
      wrapperComponent,
      text,
      data,
      tpl,
      inline,
      placeholder,
      classnames: cx,
      popOverContainer,
      defaultOpen,
      domicile,
      name,
      env
    } = this.props;
    const { visible, openHtml } = this.state
    const value = getPropValue(this.props);
    const primaryField = (this.props.store as any)?.primaryField
    const primaryVlaue = domicile ? domicile?.data?.[primaryField] ?? '' : ''
    const primarylable = domicile ? domicile.label : ''
    const Component = wrapperComponent || (inline ? 'span' : 'div');
    const placement = !isMobile() ? 'rightTop' : 'bottomRight';
    const open = isMobile() && defaultOpen

    const wrap = this.props.format === 'autoHeight' && !!this.props.width
    let style = {}
    let textRowStyle = {}
    if (this.props.format === 'autoHeight' && this.props.textRow) {
      textRowStyle = {
        overflow: 'hidden',
        textOverflow: 'ellipsis',
        display: '-webkit-box',
        '-webkit-box-orient': 'vertical',
        'WebkitLineClamp': this.props.textRow + '',

      }
    }
    if (localStorage.getItem('textControlInput') && typeof localStorage.getItem('textControlInput') == 'string') {
      const textControlInput = JSON.parse(localStorage.getItem('textControlInput')!)
      if (textControlInput && Array.isArray(textControlInput) && textControlInput.some((item: any) => item.name == name)) {
        style = textControlInput.find((item: any) => item.name == name).style
      }
    }
    const renderComponent = <Component style={{ whiteSpace: wrap ? 'pre-wrap' : undefined, ...textRowStyle }} className={cx('PlainField', defaultOpen && 'TplOpen', className)} onClick={() => {
      open && this.setState({ openHtml: true })
    }}>
      {tpl || text ? (
        filter(tpl || (text as string), data)
      ) : typeof value === 'undefined' || value === '' || value === null ? (
        <span className="text-muted">{placeholder}</span>
      ) : (
        this.formatter(value)
      )}
    </Component>

    const popoverComponent = (
      <>
        <span onClick={(e) => e.stopPropagation()} ref={this.htmlPopovers.bind(this)} className={cx('PlainField', className)} style={{ whiteSpace: 'break-spaces', ...style }}>
        </span >
        {!isMobile() && <div className={cx('Footer-tplPop')} onClick={(e) => e.stopPropagation()}>
          <Button size='small' style={{ borderRadius: 5 }} onClick={() => this.setState({ visible: false })}>
            {this.props.translate('Dialog.close')}
          </Button>
        </div>}
      </>
    )
    return (<>
      {
        defaultOpen && !wrap ?
          <div className={cx('Tpltab')} >
            {renderComponent}
            {!isMobile() &&
              <Popover
                content={popoverComponent}
                trigger={'click'}
                visible={visible}
                overlayClassName={cx('TplPop')}
                getPopupContainer={env.getModalContainer}
                autoAdjustOverflow
                placement={placement}
                destroyTooltipOnHide
                onVisibleChange={(visible) => { this.setState({ visible }) }}
                title={
                  <div className={cx('Title-tplPop')} onClick={(e) => e.stopPropagation()}>
                    <div>{primarylable + ": " + (isNil(primaryVlaue) ? '' : primaryVlaue)}</div>
                    <div> <Icon icon="close" className="icon" onClick={() => this.setState({ visible: false })} style={{ cursor: 'pointer' }} /></div>
                  </div>
                }
              >
                <Icon onClick={(e: Event) => e.stopPropagation()} icon="provincial" className={[cx('TplSaving'), 'icon']} />
              </Popover >
            }
          </div > : renderComponent
      }
      {isMobile() &&
        < Drawer
          visible={openHtml}
          width="100%"
          className="textarea-drawer"
          closeIcon={<Icon icon='title-left' className="icon" style={{ width: '16px', height: '16px' }} />}
          onClose={() => this.setState({ openHtml: false })}
          destroyOnClose
          mask={false}
          getContainer={this.props.env.getModalContainer}
          zIndex={1011}
          title={domicile?.label ?? ''}
          extra={<></>}
          footer={
            <div className='textarea-drawer-footer'>
              <Button type="primary" onClick={() => this.setState({ openHtml: false })}>
                {this.props.translate('Dialog.close')}
              </Button>
            </div>
          }
        >
          {popoverComponent}
        </Drawer>}
    </>
    );
  }
}

@Renderer({
  test: /(^|\/)(?:plain|text)$/,
  name: 'plain'
})
export class PlainRenderer extends Plain { }