import React, {useState} from 'react'

import { View, Image } from '@tarojs/components'

import Taro from '@tarojs/taro'

import './index.scss'

const entranceList = [
    {
        id: 0,
        x: '51.47vw',
        y: '79.89vh'
    },
    {
        id: 1,
        x: '39.2vw',
        y: '66.26vh'
    },
    {
        id: 2,
        x: '71.2vw',
        y: '53.75vh'
    },
    {
        id: 3,
        x: '8.53vw',
        y: '50.62vh'
    },
    {
        id: 4,
        x: '45.33vw',
        y: '41.75vh'
    },
    {
        id: 5,
        x: '73.87vw',
        y: '28.57vh'
    },
    {
        id: 6,
        x: '37.33vw',
        y: '20.69vh'
    },
    {
        id: 7,
        x: '16vw',
        y: '7.27vh'
    }
]

const Enteance: React.FC = () => {

    const [visible, setVisible] = useState<boolean>(false)

    // 去我的页面

    const goMypage = () => {
        Taro.navigateTo({
             url: '/pages/My/index'
        });
    }

    return (
        <View className='Enteance'>
            <View className='game-box'>
                <Image className='my' onClick={() => goMypage()} src={require('../../assets/Entrance/my.png')} />
                <Image className='game-report' src={require('../../assets/Entrance/game-report.png')} />
            </View>

            {/* 游戏入口 */}

            {
                entranceList.map( (item, index) => (
                    <View key={item.id} className='enteance-item' style={{top: item.y, left: item.x, position: 'absolute'}}>
                        <Image className='enteance-item-img' src={require(`../../assets/Entrance/${index + 1}.png`)}></Image>
                        <Image className='star' src={require('../../assets/Entrance/star0.png')} />
                        <Image 
                          className='step' 
                          style={{ left: item.id === 3 ? 64 : -55}} 
                          src={require(`../../assets/Entrance/${item.id === 3 ? 'setp-4' : 'step'}.png`)}
                        />
                    </View>
                 ))
            }

            {/* 第一次进入的活动规则 */}
            {
               visible && <View className='rule-pop'>
                    <View className='container'>
                        <Image className='rule-img' src={require('../../assets/Entrance/first-tip.png')} ></Image>
                        <Image className='go-btn' onClick={() => setVisible(false)} src={require('../../assets/Entrance/go.png')} ></Image>
                    </View>
                </View>
            }
        </View>
    )
}

export default Enteance