import * as React from 'react'
import { BaseComponent,handleComponentClickLog } from '../base-component'
import { showMessage } from '../common/toast/toast';
import { get, post } from '../utils/request'
import {
  callHandler,
  support
} from 'nejsbridge/dist/bridge.lofter.es.js';
import { openAppLofter } from 'nw-app-lofter';
import { isLofter } from 'nw-detect';
import {
  Props,
  State,
  BlogInfo,
  DataInfo
} from './type'
import { onBlogInfoRequest } from '../utils/one-request'
import { fetchBlogInfo } from './fetch'

import { rem } from "../style/function.style";
import * as Styled from './index.style'
import log from '../utils/lofter-log'

export class Focus extends React.Component<Props, State> {
  static defaultProps = new Props()

  state = new State()

  getSelfBlogId = () => {
    onBlogInfoRequest.oneFetch()
      .then(res => {
        if (res.meta.status === 200) {
          this.setState({
            selfBlogId: res.response.blogId
          })
        }
      }).catch(err => {
        console.log('blog info err', err)
      })
  }

  handleFollow = (blogId: number, item: DataInfo, index: number) => { // 这里只能从未关注到关注
    if (!isLofter()) {
      openAppLofter({
        path: 'webview',
        query: {
          url: location.href
        }
      })
      return;
    }
    post('//www.lofter.com/spread/common/follow', {
      blogId: blogId
    }).then(res => {
      if (res.code === 200) {
        // 关注打点
        log.capture(`cms-1`, {
          category: 'cms',
          action: 101,
          scene: 'cms',
          v: '1.0.0',
          followers: this.state.selfBlogId,
          creator: blogId
        })
        handleComponentClickLog(this.props.instanceKey) // 关注点击打点
        showMessage({ text: '关注成功' });
        let temp: any
        temp = this.state.data;
        temp[index].follow = true;
        this.setState({
          data: temp
        })
      } else {
        if (res.code === 401) {
            callHandler('njb_login', () => {
              this.getSelfBlogId()
              this.getUserInfo(this.props.blogNames).then(
                (data) => {
                  this.setState({
                    data: data
                  })
                }
              )
            })
        } else {
          showMessage({ text: res.msg });
        }
      }
    })
  }
  getUserInfo = async(blogNames: string) => {
    let res = await fetchBlogInfo(
      blogNames
    )
    return res ? (
      Array.isArray(res) ? res : [res]
    ) : []
  }
  componentDidMount() {
    this.getSelfBlogId()
    this.getUserInfo(this.props.blogNames).then(
      (data) => {
        this.setState({
          data: data
        })
      }
    )
  }
  componentDidUpdate(preProps: any) {
    if (this.props.blogNames !== preProps.blogNames) {
      if (this.props.blogNames.indexOf('，') > 0) {
        showMessage({ text: '不能出现中文逗号' });
      }
      else {
        this.getUserInfo(this.props.blogNames).then(
          (data) => {
            data = data.filter((a: any) => a.blogInfo !== null)
            this.setState({
              data: data
            })
          }
        )
      }
    }
  }

  openPage(blogName:string) {
    if (isLofter()) {
      window.location.href = `https://${blogName}.lofter.com/`
    } else {
      window.location.href = `https://www.lofter.com/front/blog/home-page/${blogName}`
    }
  }

  render() {
    const {
      style: oriStyle,
      buttonName,
      type,
      buttonColor,
    } = this.props
    const style = { ...oriStyle }
    console.log(style)
    const YellowIcon = () => {
      return (
        <svg width="18" height="18" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M19 36.5C28.665 36.5 36.5 28.665 36.5 19C36.5 9.33502 28.665 1.5 19 1.5C9.33502 1.5 1.5 9.33502 1.5 19C1.5 28.665 9.33502 36.5 19 36.5Z" fill="#FFD64C" stroke="white" strokeWidth="3" />
          <path fillRule="evenodd" clipRule="evenodd" d="M14.1226 15.2474C12.4726 11.8069 9.68799 13.7997 9.68799 13.7997L15.892 25.8468C15.892 25.8468 16.7054 27.7081 18.5669 27.7081C20.4284 27.7081 21.0201 26.7283 21.4948 25.8468C21.9815 24.9429 26.8286 13.7908 26.8286 13.7908C26.8286 13.7908 24.2318 12.2302 23.1419 14.5501C22.2218 16.5086 18.326 24.1521 18.326 24.1521C18.326 24.1521 15.7677 18.6778 14.1226 15.2474Z" fill="white" stroke="white" strokeLinecap="round" />
        </svg>
      )
    };
    const GreenIcon = () => {
      return (
        <svg width="18" height="18" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M19 36.5C28.665 36.5 36.5 28.665 36.5 19C36.5 9.33502 28.665 1.5 19 1.5C9.33502 1.5 1.5 9.33502 1.5 19C1.5 28.665 9.33502 36.5 19 36.5Z" fill="#14C4BC" stroke="white" strokeWidth="3" />
          <path fillRule="evenodd" clipRule="evenodd" d="M14.1226 15.2473C12.4726 11.8069 9.68799 13.7997 9.68799 13.7997L15.892 25.8468C15.892 25.8468 16.7054 27.7081 18.5669 27.7081C20.4284 27.7081 21.0201 26.7283 21.4948 25.8468C21.9815 24.9429 26.8286 13.7908 26.8286 13.7908C26.8286 13.7908 24.2318 12.2301 23.1419 14.5501C22.2218 16.5085 18.326 24.1521 18.326 24.1521C18.326 24.1521 15.7677 18.6778 14.1226 15.2473Z" fill="white" stroke="white" strokeLinecap="round" />
        </svg>
      )
    };
    const YellowL = () => {
      return (
        <svg width="18" height="18" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path fillRule="evenodd" clipRule="evenodd" d="M19 38C29.4934 38 38 29.4934 38 19C38 8.50659 29.4934 0 19 0C8.50659 0 0 8.50659 0 19C0 29.4934 8.50659 38 19 38Z" fill="white" />
          <path fillRule="evenodd" clipRule="evenodd" d="M19 35C27.8366 35 35 27.8366 35 19C35 10.1634 27.8366 3 19 3C10.1634 3 3 10.1634 3 19C3 27.8366 10.1634 35 19 35Z" fill="#DAAB62" />
          <path d="M13.8327 11.1953C13.8327 10.9065 14.0934 10.6706 14.4126 10.6706C14.4605 10.6706 14.5084 10.6755 14.5536 10.6875C14.5855 10.6947 14.6147 10.7043 14.644 10.7164C14.7132 10.7428 14.7797 10.7741 14.8462 10.8054C15.0483 10.9017 15.2292 11.0196 15.3888 11.1544C15.591 11.3253 15.7639 11.5275 15.8995 11.7586C16.1762 12.2255 16.2958 12.7382 16.2958 13.6359V20.7676C16.2958 21.545 16.8864 22.1973 17.6844 22.3778C17.9105 22.4284 18.1286 22.2719 18.1286 22.0601V13.6335V13.5758C18.1232 12.4542 17.937 11.6888 17.5168 10.9739C17.2854 10.5816 16.9901 10.235 16.639 9.93653C16.3623 9.70306 16.0538 9.50329 15.7133 9.33962C15.2824 9.13263 14.6733 8.96174 13.8327 9.00747C12.7368 9.06764 12 10.0256 12 10.9402V20.9481C12.0053 22.0962 12.1995 22.8712 12.6437 23.6005C13.0427 24.2552 13.6412 24.7968 14.3647 25.1554C14.9366 25.4394 15.5271 25.6079 16.2666 25.6849C16.5938 25.7186 16.9529 25.7354 17.3572 25.7354H20.198H21.81C22.7995 25.7354 23.3687 25.8438 23.8847 26.0941C24.1401 26.2168 24.3635 26.3733 24.5524 26.5562C24.7014 26.7006 24.829 26.8643 24.9381 27.0472C24.9727 27.1074 25.0072 27.1676 25.0365 27.2301C25.0498 27.2566 25.0604 27.2831 25.0684 27.312C25.0791 27.3529 25.087 27.3962 25.087 27.4395C25.087 27.7284 24.8264 27.9642 24.5072 27.9642H21.653H21.5945C21.1583 27.9618 20.8018 27.9378 20.5039 27.8896C20.1475 27.8319 19.8629 27.7428 19.5783 27.6056C19.3362 27.4877 19.1527 27.312 18.9399 27.1724C18.3467 26.78 17.5806 26.8667 17.2747 26.9004C16.9688 26.9365 16.78 27.2181 16.9076 27.4347C17.0353 27.6513 17.3386 28.0605 17.6179 28.3229C17.9344 28.6213 18.3015 28.8692 18.7111 29.069C19.166 29.288 19.6341 29.4349 20.1821 29.5239C20.6077 29.5913 21.0865 29.625 21.6504 29.625H24.6508C26.1564 29.625 27.1405 28.5756 26.9836 27.5141C26.9703 27.4227 26.957 27.3433 26.941 27.271C26.8426 26.8089 26.7788 26.6549 26.55 26.265C26.3692 25.9569 26.1484 25.6777 25.8904 25.4274C25.5632 25.1096 25.1775 24.8425 24.7439 24.6331C23.9539 24.2504 23.108 24.0843 21.8685 24.0795H21.8046H18.1844H17.3545H17.2933C16.9848 24.0771 16.7135 24.0651 16.4767 24.0386C16.0325 23.9928 15.7 23.9062 15.3835 23.7666C14.8674 23.5379 14.4419 23.1577 14.1865 22.6907C13.9418 22.243 13.8327 21.7376 13.8327 20.8879V11.1953V11.1953Z" fill="white" />
        </svg>
      )
    }
    const computedLogo = (isAuth: boolean, isVerify: boolean, signAuth: boolean) => {
      // 权限signAuth>isVerify>isAuth
      if (signAuth) return <YellowL />
      if (isVerify) return <YellowIcon />
      if (isAuth) return <GreenIcon />
      if (!isVerify && !isAuth && !signAuth) return null;
    }

    // ！传入 BaseComponent 不要包含 style！
    const baseComponentProps = {
      ...this.props,
    }
    delete baseComponentProps.style

    return (
      <div
        style={{
        ...style,
        height: type === 3 ? rem(102) : 'auto',
        width: parseFloat(style.width as string) < 4 ? '4rem' : style.width
      }}>
        <BaseComponent {...baseComponentProps}>
          <Styled.FocusContainer type={type}>
            {
              this.state?.data?.length > 0
              && this.state.data?.map((item: DataInfo, index: number) => (
                <Styled.FocusControlContainer key={index} className={type ? `type-${type}` : 'type-3'} focusColor={buttonColor}>
                  <Styled.Item>
                    <img src={item.blogInfo.bigAvaImg} onClick={() => this.openPage(item.blogInfo.blogName)}></img>
                    <div className="info-container">
                      <Styled.NickName className={type ? `type-${type}` : 'type-3'}>{item.blogInfo.blogNickName}</Styled.NickName>
                      {
                        !item.follow && <div
                          className="button"
                          role="button"
                          onClick={() => this.handleFollow(item.blogInfo.blogId, item, index)}
                        >
                          {(buttonName || '关注')}
                        </div>
                      }
                      {item.follow && <div
                        className="button"
                        role="none"
                      >
                        已关注
                      </div>
                      }
                    </div>
                    <Styled.Vlogo>
                      {
                        computedLogo(item.blogInfo.isAuth, item.blogInfo.isVerify, item.blogInfo.signAuth)
                      }
                    </Styled.Vlogo>

                  </Styled.Item>
                </Styled.FocusControlContainer>
              ))
            }
          </Styled.FocusContainer>
        </BaseComponent>
      </div>
    )
  }
}