import { useEffect, useState } from 'react'
import { getConfig, getService } from '@/api/user'
import { TEMP_TOKEN_STORAGE_KEY } from '@/utils/request'

type TwinsProps = {
  installUrl: string
}

function Twins({ installUrl }: TwinsProps) {
  const [serviceUrl, setServiceUrl] = useState('')

  useEffect(() => {
    let isMounted = true

    async function initTwinsConfig() {
      try {
        const { data: config } = await getConfig()

        if (config.token) {
          window.sessionStorage.setItem(TEMP_TOKEN_STORAGE_KEY, config.token)
        }

        const { data: service } = await getService()
        const nextServiceUrl = service['kf.address']

        if (isMounted && typeof nextServiceUrl === 'string') {
          setServiceUrl(nextServiceUrl)
        }
      } catch {
        if (isMounted) {
          setServiceUrl('')
        }
      }
    }

    initTwinsConfig()

    return () => {
      isMounted = false
    }
  }, [])

  return (
    <div id="Twins">
      <Header />
      <Card serviceUrl={serviceUrl} installUrl={installUrl} />
    </div>
  )
}


function Header() {
  return (
    <div className="header">
      <div className="row-1">
        iPhone<span className="green">双开微信</span>
      </div>
      <div className="row-2">
        专享 TestFlight 内测试版 | 无<br />需越狱 | 无封号风险
      </div>
      <div className="row-3">
        <div className="item">
          <img src="./images/app-twins/icon-safe.png" alt="安全问题"></img>
          <span>安全问题</span>
        </div>
        <div className="item">
          <img src="./images/app-twins/icon-minus.png" alt="无封号风险"></img>
          <span>无封号风险</span>
        </div>
      </div>
    </div>
  )
}

type CardProps = {
  serviceUrl: string
  installUrl: string
}

function Card({ serviceUrl, installUrl }: CardProps) {
  const steps = [
    {
      label: '步骤一',
      title: "下载 TestFlight 应用",
      desc: [
        "· 若已安装，请跳过此步；",
        "· 未安装请点击下方按钮前往App Store下载；",
      ],
      linkName: "前往下载",
      linkUrl: "https://apps.apple.com/us/app/testflight/id899247664?l=zh-Hans-CN",
      sideBg: "./images/app-twins/step1-side.png"
    },
    {
      label: '步骤二',
      title: "安装双开微信",
      desc: [
        "· 点击下方按钮，自动跳转安装您的专属微信",
        "· 下载完成后，桌面会出现第二个微信图标；",
      ],
      linkName: "前往安装",
      linkUrl: installUrl,
      sideBg: "./images/app-twins/step2-side.png"
    }
  ]
  return (
    <div className="card">
      <div className="card-title">
        <img src="./images/app-twins/line-left.png"></img>
        <div>
          仅需<span className="green">两步</span> · 30秒完成安装
        </div>
        <img src="./images/app-twins/line-right.png"></img>
      </div>
      <div className="card-steps">
        {
          steps.map((step, index) => (
            <div className="step-item" key={index} style={{ backgroundImage: `url(${step.sideBg})` }}>
              <div className="step-item-label">{step.label}</div>
              <div className="step-item-title">{step.title}</div>
              <div className="step-item-desc">
                {
                  step.desc.map((descItem, descIndex) => (
                    <div key={descIndex}>{descItem}</div>
                  ))
                }
              </div>
              <a className="step-item-link" target="_blank" href={step.linkUrl}>{step.linkName}</a>
            </div>
          ))
        }
      </div>
      <a className="contact-us" href={serviceUrl || undefined} target="_blank" rel="noreferrer">
        <img src="./images/app-twins/icon-concat.png" alt="客服1对1指导安装"></img>
        <span>客服1对1<br/>指导安装</span>
      </a>
    </div>
  )
}

export default Twins