import React, { Component }  from 'react'
import {Block, Button, Image, Navigator, Swiper, SwiperItem, Text, Video, View} from '@tarojs/components'
import {Props} from 'types/Decode'
import {styleToObj} from "../../utils/dom"
import AudioPlayer from "../AudioPlayer/AudioPlayer";
import Latex from "../Latex/latex";
import Yuml from "../Yuml/Yuml";
import Table from "../Table/table";
import Img from "../Img/Img";
import DecodeA from "./decodeA";
import TodoGroup from "../TodoGroup/TodoGroup";
import config from '../../utils/config'
import Copy from '../../../images/copy.svg'
import Local from '../../../images/local.svg'
import MapIcon from '../../../images/map.svg'
import ShiPinHao from '../../../images/shipinhao.svg'
import {Data} from "../../../types/Data";

function isEmptyString(t: string|undefined):boolean {
  return !t || t === "" || t === "\r\n" || t==="\r"|| t==="\n";
}

function convertString(t: string|undefined):string|undefined  {
  if(t) {
    return t.replace(/\r|\n/,'');
  } else {
    return t;
  }
}

function isSetTheValue(item: Data, name:string) {
  if(!item.attr) {
    return false;
  }
  let keys = Object.keys(item.attr);

  if(keys.includes(name)) {
    let v = item.attr[name];
    if(v == undefined) {
      return true;
    } else {
      return v != '0';
    }
  }
  return false;
}

export default class DecodeB extends Component<Props, {}> {
  options = {
    addGlobalClass: true
  }

  imgClick = (src) => {
    if (this.props.onImgClick) {
      this.props.onImgClick(src)
    }
  }

  linkClick = (href) => {
    if (this.props.onLinkClick) {
      this.props.onLinkClick(href)
    }
  }

  buildChildView() {
    const {nodes, latexApi, yumlApi, inCode, onCopyLink} = this.props
    if (nodes && nodes.child) {
      return nodes.child.map(item => {
        const tag = item.tag || 'undefined'
        const style = styleToObj(item.attr && item.attr.style ? item.attr.style : '')
        const id = item.attr && item.attr.id ? item.attr.id : '';
        if (item.attr && item.attr.width) {
          style.width = item.attr.width
        }
        let childView;
        if (tag === 'undefined') {
          if(id) {
            if(inCode) {
              childView = <Block id={id} key={item.index}>{item.text}</Block>
            } else {
              childView = <Block id={id} key={item.index}>{isEmptyString(item.text) ? item.text : <Text selectable={true}>{convertString(item.text)}</Text>}</Block>
            }
          } else {
            if(inCode) {
              childView = <Block key={item.index}>{item.text}</Block>
            } else {
              childView = <Block key={item.index}>{isEmptyString(item.text) ? item.text : <Text selectable={true}>{convertString(item.text)}</Text>}</Block>
            }
          }
        } else if (tag === 'view') {
          if(id) {
            childView = <View id={id} key={item.index} className={config.classPrefix + item.attr.class} style={style}>
              {item.child &&
              <DecodeB inCode={inCode} latexApi={latexApi} yumlApi={yumlApi} onImgClick={this.imgClick} onLinkClick={this.linkClick}
                       nodes={item} onCopyLink={onCopyLink}
              />}
            </View>
          } else {
            childView = <View key={item.index} className={config.classPrefix + item.attr.class} style={style}>
              {item.child &&
              <DecodeB inCode={inCode} latexApi={latexApi} yumlApi={yumlApi} onImgClick={this.imgClick} onLinkClick={this.linkClick}
                       nodes={item}  onCopyLink={onCopyLink}
              />}
            </View>
          }
        } else if (tag === 'code') {
          childView = <View id={id} key={item.index} className={config.classPrefix + item.attr.class} style={style}>
            {item.child &&
            <DecodeA inCode={true} latexApi={latexApi} yumlApi={yumlApi} onImgClick={this.imgClick} onLinkClick={this.linkClick}
                     nodes={item}  onCopyLink={onCopyLink}
            />}
          </View>
        } else if (tag === 'video') {
          childView = (<Video id={id} key={item.index} src={item.attr.src} poster={item.attr.poster} style={style}>{item.child &&
          <DecodeA latexApi={latexApi} yumlApi={yumlApi} onImgClick={this.imgClick} onLinkClick={this.linkClick}
            nodes={item}  onCopyLink={onCopyLink}
          />}</Video>)
        } else if (tag === 'text') {
          childView = <View id={id} key={item.index} className={config.classPrefix + item.attr.class} style={style}>
            {item.child ?
              <DecodeA latexApi={latexApi} yumlApi={yumlApi} onImgClick={this.imgClick} onLinkClick={this.linkClick}
                nodes={item}  onCopyLink={onCopyLink}
              /> : item.text}
          </View>
        } else if (tag === 'image') {
          childView = <Image id={id} key={item.index}
            className={config.classPrefix + item.attr.class}
            style={style}
            src={item.attr.src}
            onClick={() => {
                               this.imgClick(item.attr.src)
                             }}
            mode={item.attr.mode || 'widthFix'}
            lazyLoad={item.attr['lazy-load']}
          >
            {item.child &&
            <DecodeA latexApi={latexApi} yumlApi={yumlApi} onImgClick={this.imgClick} onLinkClick={this.linkClick}
              nodes={item}  onCopyLink={onCopyLink}
            />}
          </Image>
        } else if (tag === 'navigator') {
          let url = decodeURIComponent(item.attr.href);
          let isTextChild = item.child.length > 0 && item.child[0].type === 'text';
          let isLocation = url?.startsWith("位置:");
          let isMap = url?.startsWith("地图:");
          let isShiPinHao = url?.startsWith("视频号:");
          if(id) {
            childView = <Navigator id={id} key={item.index}
                                   className={config.classPrefix + item.attr.class}
                                   style={style}
                                   url={item.attr.href}
                                   onClick={() => {
                                     this.linkClick(item.attr.href)
                                   }}
            >
              {
                isTextChild && isLocation &&
                <Image src={Local} style='height:20px;width:20px;'/>
              }
              {
                isTextChild && isMap &&
                <Image src={MapIcon} style='height:20px;width:20px;'/>
              }
              {
                isTextChild && isShiPinHao &&
                <Image src={ShiPinHao} style='height:20px;width:20px;'/>
              }
              {item.child &&
            <DecodeA latexApi={latexApi} yumlApi={yumlApi} onLinkClick={this.linkClick}
                     nodes={item}  onCopyLink={onCopyLink}
            />}</Navigator>
          } else {
            childView = <Navigator key={item.index}
                                   className={config.classPrefix + item.attr.class}
                                   style={style}
                                   url={item.attr.href}
                                   onClick={() => {
                                     this.linkClick(item.attr.href)
                                   }}
            >
              {
                isTextChild && isLocation &&
                <Image src={Local} style='height:20px;width:20px;'/>
              }
              {
                isTextChild && isMap &&
                <Image src={MapIcon} style='height:20px;width:20px;'/>
              }
              {
                isTextChild && isShiPinHao &&
                <Image src={ShiPinHao} style='height:20px;width:20px;'/>
              }
              {item.child &&
            <DecodeA latexApi={latexApi} yumlApi={yumlApi} onLinkClick={this.linkClick}
                     nodes={item}  onCopyLink={onCopyLink}
            />}</Navigator>
          }
          if(onCopyLink) {
            let childText = item.child.map((item)=>item.text).reduce((pre,cur)=>{
              let ret;
              if(pre) {
                ret = pre+ cur;
              } else {
                ret = cur;
              }
              return ret;
            }) || '';

            childView =  <View style='display:inline'>
              {childView}
              <Image src={Copy} style='height:20px;width:20px;' onClick={()=>{
                onCopyLink(item.attr.href, childText);
              }}/>
            </View>
          }
        } else if (tag === 'swiper') {
          childView = <Swiper
            id={id} key={item.index}
            className={config.classPrefix + item.attr.class}
            style={style}
            indicatorDots={isSetTheValue(item, "指示点") || isSetTheValue(item, "indicatorDots")}
            autoplay={isSetTheValue(item, "自动播放") || isSetTheValue(item, "autoplay")}
            circular={isSetTheValue(item, "衔接") || isSetTheValue(item, "circular")}
            vertical={isSetTheValue(item, "纵向") || isSetTheValue(item, "vertical")}
          >{item.child &&
          <DecodeA latexApi={latexApi} yumlApi={yumlApi} onImgClick={this.imgClick} onLinkClick={this.linkClick}
            nodes={item}  onCopyLink={onCopyLink}
          />}</Swiper>
        } else if (tag === 'swiper-item') {
          childView = <SwiperItem id={id} key={item.index}
            className={config.classPrefix + item.attr.class}
            style={style}
          >{item.child &&
          <DecodeA latexApi={latexApi} yumlApi={yumlApi} onImgClick={this.imgClick} onLinkClick={this.linkClick}
            nodes={item}  onCopyLink={onCopyLink}
          />}</SwiperItem>
        } else if (tag === 'block') {
          childView = <Block id={id} key={item.index}>{item.child &&
          <DecodeA latexApi={latexApi} yumlApi={yumlApi} onImgClick={this.imgClick} onLinkClick={this.linkClick}
            nodes={item}  onCopyLink={onCopyLink}
          />}</Block>
        } else if (tag === 'button') {
          childView =
            <Button id={id} key={item.index} className={config.classPrefix + item.attr.class} style={style}>{item.child &&
            <DecodeA latexApi={latexApi} yumlApi={yumlApi} onImgClick={this.imgClick} onLinkClick={this.linkClick}
              nodes={item}  onCopyLink={onCopyLink}
            />}</Button>
        } else if (tag === 'audio-player') {
          childView = <AudioPlayer id={id} key={item.index} data={item} />
        } else if (tag === 'latex') {
          childView = <Latex id={id} api={latexApi} onImgClick={this.imgClick} key={item.index} data={item} />
        } else if (tag === 'table') {
          childView = <Table id={id} key={item.index} data={item} onImgClick={this.imgClick} onLinkClick={this.linkClick} onCopyLink={onCopyLink}/>
        } else if (tag === 'yuml') {
          childView = <Yuml id={id} api={yumlApi} onImgClick={this.imgClick} key={item.index} data={item} />
        } else if (tag === 'img') {
          childView = <Img id={id} onImgClick={this.imgClick} key={item.index} data={item} />
        } else if (tag === 'todogroup') {
          childView = <TodoGroup id={id} key={item.index} data={item} />
        }
        return childView
      })
    }
    return <Block />
  }

  render() {
    const node = this.buildChildView()
    return (
      <Block>{node}</Block>
    )
  }
}