import * as React from 'react'
import { isLofter, isAndroid } from 'nw-detect'
import { openAppLofter } from 'nw-app-lofter'

import { cancelInvite } from '../actions'
import { Image } from '../image'

import { formatNumber } from '../../utils/format'
import { ColDetail } from '../type'

import {
  Container,
  Header,
  HeaderImageBorder,
  HeaderTag,
  HeaderCount,
  Title,
  Description,
  InfoContainer,
  HeaderImageBg1,
  HeaderImageBg2,
  UserInfo,
  HeaderInfoContainer,
  Button,
  EmptyDescription,
  LoadingCol
} from './index.style'

interface Props {
  colDetail: ColDetail;
  key: React.Key;
  className: string;
  type: 'me' | 'other';
  refresh?: () => any;
}

export const CollectionItem = ({
  key,
  colDetail,
  className,
  type,
  refresh
}: Props) => {

  const goToUserPage = () => {
    const { blogName } = colDetail?.blogInfo
    if (!blogName) return
    if (isLofter()) {
      window.location.href = `lofter://${blogName}.lofter.com/`
    } else {
      openAppLofter({
        path: 'homepage',
        query: {
          id: blogName
        }
      })
    }
  }

  const gotToCol = () => {
    let { blogName } = colDetail?.blogInfo
    const { collectionId } = colDetail
    // 去除 blogName 中所有的 - 字符
    let reg = /(-)/g
    blogName = blogName.replace(reg, '')

    if (!blogName) return
    let link = `http://www.lofter.com/collection/${blogName}/?op=collectionDetail&collectionId=${collectionId}`
    if (isAndroid()) {
      link = `http://www.lofter.com/collection/${blogName}/?op=collectionDetail&collectionId=${collectionId}&sort=1&invitationId=0`
    }
    if (isLofter()) {
      window.location.href = link
    } else {
      openAppLofter({
        path: 'webview',
        query: {
          url: link
        }
      })
    }
  }

  const cancel = () => {
    cancelInvite(colDetail.id)
      .then(() => {
        refresh?.()
      })
  }
  
  return (
    <Container key={key} className={className}>
      {
        colDetail?.name ? (
          <>
            <Header
              onClick={gotToCol}
            >
              <HeaderImageBg2 />
              <HeaderImageBg1 />
              <Image
                src={colDetail?.coverUrl}
                width={307}
                height={307}
                className="header-img"
              />
              <HeaderImageBorder />
              <HeaderInfoContainer>
                {
                  colDetail?.tags
                    ? (
                      <HeaderTag>
                        {`# ${colDetail.tags.split(',')[0]}`}
                      </HeaderTag>
                    ) : null
                }
                {
                  colDetail?.invitedCount
                    && (
                      <HeaderCount>
                        <Image
                          src=" https://lofter.lf127.net/1636957089014/user-icon.png"
                          width={24}
                          height={24}
                          className="header-icon"
                        />
                        {formatNumber(colDetail?.invitedCount)}
                      </HeaderCount>
                    )
                }
              </HeaderInfoContainer>
            </Header> 
            <InfoContainer>
              <Title onClick={gotToCol}>
                {colDetail?.name}
              </Title>
              {
                colDetail?.description
                  ? (
                    <Description onClick={gotToCol}>
                      {colDetail?.description}
                    </Description>
                  )
                  : <EmptyDescription />
              }
              <UserInfo onClick={goToUserPage}>
                <Image
                  src={colDetail?.blogInfo.bigAvaImg}
                  width={32}
                  height={32}
                  className="avatar"
                />
                <div className="name">
                  {colDetail?.blogInfo.blogNickName}
                </div>
              </UserInfo>
              {
                type === 'me'
                  ? (
                    <Button 
                      type="me"
                      onClick={cancel}
                    >撤回</Button>
                  )
                  : (
                    <Button 
                      type="other"
                      onClick={goToUserPage}
                    >私聊加入</Button>
                  )
              }
            </InfoContainer>
          </>
        ) : (
          <LoadingCol>
            {
              colDetail.id 
                ? (
                  <span className="tips">
                    { colDetail.id }无数据
                  </span>
                )
                : null
            }
            {
              colDetail.id === 0
                ? (
                  <span className="tips">
                    请输入合集 id
                  </span>
                )
                : null
            }
            <span className="img" />
            <div className="title" />
            <div className="desc" />
            <div className="user">
              <span className="avatar" />
              <span className="name" />
            </div>
          </LoadingCol>
        )
      }
    </Container>
  )
}