"use client";

import { Mask } from "antd-mobile";
import clsx from "clsx";
import Image from "next/image";
import { Fragment, useEffect, useRef, useState } from "react";
import styles from "./style.module.scss";
import LotteryWheel from './LotteryWheel';


const CashMainCom = ()=>{
  return (
    <div className={`${styles.cashMain} ${styles.cashMain} ${styles.type1}`}>
      <div className={styles.haveCash}>
        <img  src="/wheel/cash.png" alt="" className={styles.cashImg} />
        <div > R$ <span  className={styles.cash}>94.15</span></div>
        <span  className={styles.withdraw}><img  src="/wheel/pix.png" alt=""/> SACAR </span>
      </div>
      <div  className={styles.progress}>
        <div  className={styles.num}> 94.15%</div>
        <div  className={styles.bar}>
          <span  style={{width: "calc(97.15% - 0.07rem)"}}></span>
        </div>
      </div>
      <div  className={styles.needCash}> Ainda e necessário  <span  className={styles.needCashNum}>5.85</span> para realizar do saque </div>
    </div>
  )
}

const DrawMain=()=>{
  return (
    <div className={styles.drawMain}>
      <div className={styles.draw}>
        <img src="/wheel/d.png" className={styles.lamp}/>
        <img src="/wheel/light1.png" className={styles.light1}/>
        <img src="/wheel/light2.png" className={styles.light2}/>
        <div className={styles.pointer}>
          <img src="/wheel/pointer.png" />
        </div>
        <img src="/wheel/bg_light.png" className={styles.drawBgImg}/>
        <div className={`${styles.drawLen} ${styles.position} `}></div>
        {/* <div className={styles.drawContents}>
          <canvas id={styles.draw} width={306} height={306} />
        </div> */}
        <LotteryWheel />
      </div>
    </div>
  )
}

const DrawContent = ()=>{
  return (
    <div  className={styles.drawContent}>
      <div  className={styles.text}>
        <span ><span  style={{color: "rgb(135, 149, 177)"}}>Expira em</span> 2d 19:18:13</span>
      </div>
      <div  className={styles.cashButton}>
        <div> Convide amigos para ajudar com saques </div>
        <div className={`${styles.iconfont} ${styles.iconShare}`}></div>
      </div>
    </div>
  )
}

const Report=()=>{
  const winListData = Array(500).fill('1')
  return (
    <div className={styles.report}>
      <div className={`${styles.vanTabs} ${styles.vanTabsLine}`}>
        <div className={styles.vanTabsWrap}>
          <div className={styles.vanTabsNav}>
            <div className={`${styles.vanTabItem} ${styles.vanTabAcrive}`}>Relatório</div>
            <div className={`${styles.vanTabItem}`}>Minha Referencia</div>
          </div>
        </div>
        <div className={styles.vanTabsContent}>
          <div className={styles.vantabpane}>
            <div className={styles.tabContent}>
              <div className={`${styles.winList} ${styles.swipernoswiping} ${styles.type2}`}>
                {winListData.length>0  && winListData.map((item,index)=>{
                  return (
                    <div className={styles.item} key={index}>
                      <span  className={`${styles.name} ${styles.omitWrap}`}>5533******412</span>
                      <span  className={styles.tipText}> Acabou de saca </span>
                      <div  className={styles.value}>
                        <span  className={styles.addCash}>+100</span>
                        <span  className={styles.unit}> R$</span>
                      </div>
                    </div>
                  )
                })}
              </div>
            </div>
          </div>
        </div>
      </div>
      <div className={styles.rules}>
        <h2>Regras</h2>
        <ul className={styles.tipsContent}>
          <li>1.Você pode iniciar um saque quando o valor acumulado atingir 100 BRL.  </li>
          <li>2.Convidar amigos para se registrarem no 9f.com irá ajudá- lo a sacar dinheiro rapidamente.</li>
          <li>3. Cada usuário receberá uma única rodada grátis por dia. </li>
          <li>4.Cada usuário tem um período de validade de 3 dias para cada atividade e pode participar da atividade várias vezes.</li>
          <li>5.Se você receber um bônus de dinheiro extra, pode jogar jogos de graça e ganhar ainda mais dinheiro real.</li>
          <li>6.Se voce nao retirar o dinheiro dentro de 3 dias,ele ser perdido.</li>
        </ul>
      </div>
    </div>
  )
}


const CashWheelClient = () => {
    return (
       <div className={styles.cashWheelClient}>
        <CashMainCom />
        <DrawMain/>
        <DrawContent />
        <Report />
        {/* <LotteryWheel/> */}
       </div>
    );
};

export default CashWheelClient;
