import React from 'react'
import styles from './styles.less'
import * as ycore from 'ycore'
import * as antd from 'antd'
import { PageHeaderWrapper } from '@ant-design/pro-layout'
import { CustomIcons, MainFeed, PostCreator } from 'components'
import { SetHeaderSearchType } from 'components/HeaderSearch'
import * as Icons from '@ant-design/icons'
import Icon from '@ant-design/icons'
import Follow_btn from './components/Follow_btn.js'

class UserProfile extends React.Component {
  constructor(props) {
    super(props),
      (this.state = {
        invalid: false,
        UUID: '',
        RenderValue: {},
        loading: true,
        Followed: '',
      })
  }

  handleFollowUser = () => {
    const payload = { user_id: this.state.UUID }
    ycore.comty_user.follow((err, res) => {
      if (err) {
        return false
      }
      this.setState({ Followed: !this.state.Followed })
      return
    }, payload)
  }

  componentDidMount() {
    const { regx } = this.props
    this.initUser(regx)
    SetHeaderSearchType.disable()
  }

  initUser = e => {
    const parsed = e.shift()
    const raw = parsed.toString()
    const string = raw.replace('/@', '')

    const payload = { key: string }
    ycore.comty_user.find((err, res) => {
      err ? ycore.notify.error(err) : null
      try {
        const rp = JSON.parse(res)
        ycore.yconsole.log(rp)
        if (!rp['0']) {
          ycore.yconsole.log('Bad response / User not found')
          const val = { id: null, username: 'User not found!' }
          this.setState({ invalid: true, RenderValue: val, loading: false })
          ycore.router.go(`main`)
          antd.message.warning(`Its seams like @${string} not exist`)
          return
        }
        const c1 = rp['0'].username.toLowerCase()
        const c2 = string.toLowerCase()
        if (c1 !== c2) {
          ycore.yconsole.log(`Using aproximate user! => ${c1}  /  ${c2}`)
          ycore.router.go(`@${c1}`)
        }

        const payload = { id: rp['0'].user_id }
        ycore.comty_user.__tags((err, res) => {
          if (err) {
            ycore.notify.error(err)
            return
          }
        }, payload)

        this.setState({
          UUID: rp['0'].user_id,
          RenderValue: rp['0'],
          loading: false,
          Followed: ycore.booleanFix(rp['0'].is_following),
        })
      } catch (err) {
        ycore.notify.error(err)
      }
    }, payload)
  }

  UserHeader = values => {
    return (
      <div className={styles.userWrapper}>
        <div className={styles.UserCover}>
          <img src={values.cover} />
        </div>

        <PageHeaderWrapper
          content={
            <div className={styles.pageHeaderContent}>
              <div className={styles.avatar}>
                <antd.Avatar shape="square" src={values.avatar} />
              </div>
              <div className={styles.content}>
                <div className={styles.TagWrappers}>
                  {ycore.booleanFix(values.nsfw_flag) ? (
                    <antd.Tag color="volcano">NSFW</antd.Tag>
                  ) : null}
                  {ycore.booleanFix(values.is_pro) ? (
                    <antd.Tag color="purple">
                      CPRO™ <Icons.RocketOutlined />
                    </antd.Tag>
                  ) : null}
                  {ycore.booleanFix(values.dev) ? (
                    <antd.Tag color="default">
                      DEVELOPER <Icons.CodeOutlined />
                    </antd.Tag>
                  ) : null}
                </div>
                {ycore.IsThisUser.same(values.id) ? null : (
                  <div
                    className={styles.follow_wrapper}
                    onClick={() => this.handleFollowUser()}
                  >
                    <Follow_btn followed={this.state.Followed ? true : false} />
                  </div>
                )}
                <div className={styles.contentTitle}>
                  <h1 style={{ marginBottom: '0px' }}>
                    {values.username}
                    <antd.Tooltip title="User Verified">
                      {ycore.booleanFix(values.verified) ? (
                        <Icon
                          style={{ color: 'blue', verticalAlign: 'top' }}
                          component={CustomIcons.VerifiedBadge}
                        />
                      ) : null}
                    </antd.Tooltip>
                  </h1>
                  <span
                    style={{
                      fontSize: '14px',
                      fontWeight: '100',
                      lineHeight: '0',
                      marginBottom: '5px',
                    }}
                    dangerouslySetInnerHTML={{ __html: values.about }}
                  />
                </div>
              </div>
            </div>
          }
        />
      </div>
    )
  }
  render() {
    const { loading, UUID, invalid } = this.state
    return (
      <div>
        {loading ? (
          <antd.Skeleton active />
        ) : (
          <div>
            {invalid ? null : this.UserHeader(this.state.RenderValue)}
            {ycore.IsThisUser.same(UUID) ? (
              <PostCreator userData={ycore.userData()} />
            ) : null}
            <MainFeed get="user" uid={UUID} />
          </div>
        )}
      </div>
    )
  }
}
export default UserProfile