import React, { Component } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import classnames from 'classnames';
import { getParam } from '@/utils';
import { addCountryNum } from './countryRedux';
import { HeaderBar } from '@/common'

import './index.scss';

class Country extends Component {

  constructor(props) {
    super(props);
    this.state = {
      navs: ['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'],
      currentNav: 'A'
    }
  }

  componentDidMount() {
    // document.body.scrollIntoView();
    document.addEventListener('scroll', this.judgeCurrentPosition)
  }

  componentWillUnmount() {
    document.removeEventListener('scroll', this.judgeCurrentPosition)
  }

  judgeCurrentPosition = () => {
    const { navs } = this.state;
    let top = document.documentElement.scrollTop || document.body.scrollTop;
    const lens = navs.map(item => {
      let el = document.querySelector(`[data-type="${item}"]`);
      if(el) {
        return el.offsetTop;
      }
      return '';
    });
    lens.map((item,index) => {
      if(item && (top + 200) > item) {
        this.setState({
          currentNav: navs[index]
        })
      } 
    });
  }

  toParentPage = (e, num) => {
    // console.log(this.props);
    const { history, addCountryNum } = this.props;
    addCountryNum({
      num,
      code: getParam('share_code')
    });
    // history.push(`/detail?id=${getParam('id')}`);
    history.go(-1)
    e.preventDefault();
  }

  scrollTo = (param) => {
    const el = document.querySelector(`[data-type="${param}"]`)
    if(el) {
      this.setState({
        currentNav: param
      });
      el.scrollIntoView({
        behavior: 'smooth'
      });
    }
  }

  render() {
  const data = [
    {
      type: '0',
      list: [
        {
          name: '中国大陆',
          num: '86'
        },
        {
          name: '中国澳门',
          num: '853'
        },
        {
          name: '中国香港',
          num: '852'
        },
        {
          name: '中国台湾',
          num: '886'
        }
      ]
    },
    {
      type: 'A',
      list: [
        {
          name: '阿富汗',
          num: '93'
        },
        {
          name: '阿尔巴尼亚',
          num: '355'
        },
        {
          name: '阿尔及利亚',
          num: '213'
        },
        {
          name: '安道尔',
          num: '376'
        },
        {
          name: '安哥拉',
          num: '244'
        },
        {
          name: '安圭拉',
          num: '1264'
        },
        {
          name: '安提瓜和巴布达',
          num: '1268'
        },
        {
          name: '阿根廷',
          num: '54'
        },
        {
          name: '阿鲁巴',
          num: '297'
        },
        {
          name: '阿塞拜疆',
          num: '994'
        },
        {
          name: '埃及',
          num: '20'
        },
        {
          name: '爱沙尼亚',
          num: '372'
        },
        {
          name: '埃塞俄比亚',
          num: '251'
        },
        {
          name: '爱尔兰',
          num: '353'
        },
        {
          name: '阿曼',
          num: '968'
        },
        {
          name: '阿拉伯联合酋长国',
          num: '971'
        },
        {
          name: '爱沙尼亚',
          num: '372'
        },
        {
          name: '爱沙尼亚',
          num: '372'
        },
        {
          name: '爱沙尼亚',
          num: '372'
        }
      ]
    },
    {
      type: 'B',
      list: [
        {
          name: '巴哈马',
          num: '1242'
        },
        {
          name: '巴林',
          num: '973'
        },
        {
          name: '巴巴多斯',
          num: '1246'
        },
        {
          name: '白俄罗斯',
          num: '375'
        },
        {
          name: '比利时',
          num: '32'
        },
        {
          name: '伯利兹',
          num: '501'
        },
        {
          name: '贝宁',
          num: '229'
        },
        {
          name: '百慕大群岛',
          num: '1441'
        },
        {
          name: '不丹',
          num: '975'
        },
        {
          name: '玻利维亚',
          num: '591'
        },
        {
          name: '波斯尼亚和黑塞哥维那',
          num: '387'
        },
        {
          name: '博茨瓦纳',
          num: '267'
        },
        {
          name: '巴西',
          num: '55'
        },
        {
          name: '保加利亚',
          num: '359'
        },
        {
          name: '布基纳法索',
          num: '226'
        },
        {
          name: '布隆迪',
          num: '257'
        },
        {
          name: '冰岛',
          num: '354'
        },
        {
          name: '巴基斯坦',
          num: '92'
        },
        {
          name: '巴勒斯坦',
          num: '970'
        },
        {
          name: '巴拿马',
          num: '507'
        },
        {
          name: '巴布亚新几内亚',
          num: '675'
        },
        {
          name: '巴拉圭',
          num: '51'
        },
        {
          name: '秘鲁',
          num: '354'
        },
        {
          name: '波兰',
          num: '48'
        },
        {
          name: '波多黎各',
          num: '1787'
        }
      ]
    },
    {
      type: 'C',
      list: [
        {
          name: '赤道几内亚',
          num: '240'
        }
      ]
    },
    {
      type: 'D',
      list: [
        {
          name: '丹麦',
          num: '45'
        },
        {
          name: '多米尼加',
          num: '1767'
        },
        {
          name: '多米尼加共和国',
          num: '1809'
        },
        {
          name: '德国',
          num: '49'
        },
        {
          name: '东帝汶',
          num: '670'
        },
        {
          name: '多哥',
          num: '228'
        }
      ]
    },
    {
      type: 'E',
      list: [
        {
          name: '厄瓜多尔',
          num: '593'
        },
        {
          name: '厄立特里亚',
          num: '291'
        },
        {
          name: '俄罗斯',
          num: '7'
        }
      ]
    },
    {
      type: 'F',
      list: [
        {
          name: '法罗群岛',
          num: '298'
        },
        {
          name: '斐济',
          num: '679'
        },
        {
          name: '芬兰',
          num: '358'
        },
        {
          name: '法国',
          num: '594'
        },
        {
          name: '法属圭亚那',
          num: '45'
        },
        {
          name: '法属波利尼西亚',
          num: '689'
        },
        {
          name: '菲律宾',
          num: '63'
        }
      ]
    },
    {
      type: 'G',
      list: [
        {
          name: '哥伦比亚',
          num: '57'
        },
        {
          name: '哥斯达黎加',
          num: '506'
        },
        {
          name: '古巴',
          num: '53'
        },
        {
          name: '刚果民主共和国',
          num: '243'
        },
        {
          name: '冈比亚',
          num: '220'
        },
        {
          name: '格鲁吉亚',
          num: '995'
        },
        {
          name: '格陵兰岛',
          num: '299'
        },
        {
          name: '格林纳达',
          num: '1473'
        },
        {
          name: '瓜德罗普岛',
          num: '590'
        },
        {
          name: '关岛',
          num: '299'
        },
        {
          name: '瓜地马拉',
          num: '502'
        },
        {
          name: '圭亚那',
          num: '592'
        },
        {
          name: '刚果共和国',
          num: '242'
        }
      ]
    },
    {
      type: 'H',
      list: [
        {
          name: '海地',
          num: '509'
        },
        {
          name: '洪都拉斯',
          num: '504'
        },
        {
          name: '黑山',
          num: '382'
        },
        {
          name: '荷兰',
          num: '31'
        },
        {
          name: '韩国',
          num: '82'
        }
      ]
    },
    {
      type: 'J',
      list: [
        {
          name: '加拿大',
          num: '1'
        },
        {
          name: '日本',
          num: '81'
        },
        {
          name: '柬埔寨',
          num: '855'
        },
        {
          name: '捷克',
          num: '420'
        },
        {
          name: '吉布提',
          num: '253'
        },
        {
          name: '加蓬',
          num: '241'
        },
        {
          name: '加纳',
          num: '233'
        },
        {
          name: '几内亚',
          num: '224'
        },
        {
          name: '几内亚比绍共和国',
          num: '245'
        },
        {
          name: '基里巴斯',
          num: '686'
        },
        {
          name: '吉尔吉斯斯坦',
          num: '996'
        },
        {
          name: '津巴布韦',
          num: '263'
        }
      ]
    },
    {
      type: 'K',
      list: [
        {
          name: '喀麦隆',
          num: '237'
        },
        {
          name: '开普',
          num: '238'
        },
        {
          name: '开曼群岛',
          num: '1345'
        },
        {
          name: '科摩罗',
          num: '269'
        },
        {
          name: '库克群岛',
          num: '682'
        },
        {
          name: '克罗地亚',
          num: '385'
        },
        {
          name: '库拉索',
          num: '599'
        },
        {
          name: '肯尼亚',
          num: '254'
        },
        {
          name: '科威特',
          num: '965'
        },
        {
          name: '卡塔尔',
          num: '974'
        },
        {
          name: '科特迪瓦',
          num: '225'
        }
      ]
    },
    {
      type: 'L',
      list: [
        {
          name: '老挝',
          num: '856'
        },
        {
          name: '拉脱维亚',
          num: '371'
        },
        {
          name: '黎巴嫩',
          num: '961'
        },
        {
          name: '莱索托',
          num: '266'
        },
        {
          name: '利比里亚',
          num: '231'
        },
        {
          name: '利比亚',
          num: '218'
        },
        {
          name: '列支敦士登',
          num: '423'
        },
        {
          name: '立陶宛',
          num: '370'
        },
        {
          name: '卢森堡',
          num: '352'
        },
        {
          name: '留尼汪',
          num: '262'
        },
        {
          name: '罗马尼亚',
          num: '40'
        },
        {
          name: '卢旺达',
          num: '423'
        }
      ]
    },
    {
      type: 'M',
      list: [
        {
          name: '美属萨摩亚',
          num: '1684'
        },
        {
          name: '孟加拉国',
          num: '880'
        },
        {
          name: '马其顿',
          num: '389'
        },
        {
          name: '马达加斯加',
          num: '261'
        },
        {
          name: '马拉维',
          num: '265'
        },
        {
          name: '马来西亚',
          num: '60'
        },
        {
          name: '马尔代夫',
          num: '960'
        },
        {
          name: '马里',
          num: '223'
        },
        {
          name: '马耳他',
          num: '356'
        },
        {
          name: '马提尼克',
          num: '596'
        },
        {
          name: '毛里塔尼亚',
          num: '222'
        },
        {
          name: '毛里求斯',
          num: '230'
        },
        {
          name: '墨西哥',
          num: '52'
        },
        {
          name: '摩尔多瓦',
          num: '373'
        },
        {
          name: '摩纳哥',
          num: '377'
        },
        {
          name: '蒙古',
          num: '976'
        },
        {
          name: '蒙特塞拉特岛',
          num: '1664'
        },
        {
          name: '摩洛哥',
          num: '212'
        },
        {
          name: '莫桑比克',
          num: '258'
        },
        {
          name: '缅甸',
          num: '95'
        },
        {
          name: '美属维尔京群岛',
          num: '1284'
        }
      ]
    },
    {
      type: 'N',
      list: [
        {
          name: '纳米比亚',
          num: '264'
        },
        {
          name: '尼泊尔',
          num: '977'
        },
        {
          name: '尼加拉瓜',
          num: '505'
        },
        {
          name: '尼日尔',
          num: '227'
        },
        {
          name: '尼日利亚',
          num: '234'
        },
        {
          name: '挪威',
          num: '47'
        },
        {
          name: '南非',
          num: '27'
        }
      ]
    },
    {
      type: 'O',
      list: [
        {
          name: '澳大利亚',
          num: '61'
        },
        {
          name: '奥地利',
          num: '43'
        },
        {
          name: '澳大利亚',
          num: '61'
        },
        {
          name: '澳大利亚',
          num: '61'
        },
        {
          name: '澳大利亚',
          num: '61'
        },
        {
          name: '澳大利亚',
          num: '61'
        },
        {
          name: '澳大利亚',
          num: '61'
        }
      ]
    },
    {
      type: 'P',
      list: [
        {
          name: '帕劳',
          num: '680'
        },
        {
          name: '葡萄牙',
          num: '351'
        }
      ]
    },
    {
      type: 'R',
      list: [
        {
          name: '瑞典',
          num: '46'
        },
        {
          name: '瑞士',
          num: '41'
        }
      ]
    },
    {
      type: 'S',
      list: [
        {
          name: '塞浦路斯',
          num: '357'
        },
        {
          name: '萨尔瓦多',
          num: '503'
        },
        {
          name: '圣基茨和尼维斯',
          num: '1869'
        },
        {
          name: '圣露西亚',
          num: '1758'
        },
        {
          name: '圣皮埃尔岛及密克隆岛',
          num: '508'
        },
        {
          name: '圣文森特和格林纳丁斯',
          num: '1784'
        },
        {
          name: '萨摩亚',
          num: '685'
        },
        {
          name: '圣马力诺',
          num: '378'
        },
        {
          name: '圣多美和普林西比',
          num: '239'
        },
        {
          name: '沙特阿拉伯',
          num: '966'
        },
        {
          name: '塞内加尔',
          num: '221'
        },
        {
          name: '塞尔维亚',
          num: '381'
        },
        {
          name: '塞舌尔',
          num: '248'
        },
        {
          name: '塞拉利昂',
          num: '239'
        },
        {
          name: '圣马丁岛（荷兰部分）',
          num: '1721'
        },
        {
          name: '斯洛伐克',
          num: '421'
        },
        {
          name: '斯洛文尼亚',
          num: '386'
        },
        {
          name: '所罗门群岛',
          num: '677'
        },
        {
          name: '索马里',
          num: '252'
        },
        {
          name: '斯里兰卡',
          num: '94'
        },
        {
          name: '苏丹',
          num: '249'
        },
        {
          name: '苏里南',
          num: '597'
        },
        {
          name: '斯威士兰',
          num: '268'
        }
      ]
    },
    {
      type: 'T',
      list: [
        ,
        {
          name: '塔吉克斯坦',
          num: '992'
        },
        {
          name: '坦桑尼亚',
          num: '255'
        },
        {
          name: '泰国',
          num: '66'
        },
        {
          name: '汤加',
          num: '676'
        },
        {
          name: '特立尼达和多巴哥',
          num: '1868'
        },
        {
          name: '突尼斯',
          num: '216'
        },
        {
          name: '土耳其',
          num: '90'
        },
        {
          name: '土库曼斯坦',
          num: '993'
        },
        {
          name: '特克斯和凯科斯群岛',
          num: '1649'
        }
      ]
    },
    {
      type: 'W',
      list: [
        {
          name: '文莱',
          num: '673'
        },
        {
          name: '乌干达',
          num: '256'
        },
        {
          name: '乌克兰',
          num: '380'
        },
        {
          name: '乌拉圭',
          num: '598'
        },
        {
          name: '乌兹别克斯坦',
          num: '998'
        },
        {
          name: '瓦努阿图',
          num: '678'
        },
        {
          name: '委内瑞拉',
          num: '58'
        }
      ]
    },
    {
      type: 'X',
      list: [
        {
          name: '新西兰',
          num: '64'
        },
        {
          name: '希腊',
          num: '30'
        },
        {
          name: '匈牙利',
          num: '36'
        },
        {
          name: '新喀里多尼亚',
          num: '687'
        },
        {
          name: '新加坡',
          num: '65'
        },
        {
          name: '西班牙',
          num: '34'
        },
        {
          name: '叙利亚',
          num: '963'
        },
        {
          name: '亚美尼亚',
          num: '374'
        }
      ]
    },
    {
      type: 'Y',
      list: [
        {
          name: '英国',
          num: '44'
        },
        {
          name: '印度',
          num: '91'
        },,
        {
          name: '印度尼西亚',
          num: '62'
        },,
        {
          name: '伊朗',
          num: '98'
        },,
        {
          name: '伊拉克',
          num: '964'
        },,
        {
          name: '以色列',
          num: '972'
        },,
        {
          name: '意大利',
          num: '39'
        },,
        {
          name: '牙买加',
          num: '1876'
        },,
        {
          name: '约旦',
          num: '962'
        },
        {
          name: '越南',
          num: '84'
        },
        {
          name: '英属处女群岛',
          num: '1340'
        },
        {
          name: '也门',
          num: '967'
        }
      ]
    },
    {
      type: 'Z',
      list: [
        {
          name: '中国',
          num: '86'
        },
        {
          name: '中国香港',
          num: '852'
        },
        {
          name: '中国澳门',
          num: '853'
        },
        {
          name: '中国台湾',
          num: '886'
        },
        {
          name: '中非共和国',
          num: '236'
        },
        {
          name: '乍得',
          num: '235'
        },
        {
          name: '智利',
          num: '56'
        },
        {
          name: '直布罗陀',
          num: '350'
        },
        {
          name: '赞比亚',
          num: '260'
        }
      ]
    }
  ];
  const { currentNav, navs } = this.state;
  return (
      <>
        <HeaderBar title="选择国家和地区" />
        <ul className="letter-nav">
          {navs.map((item, index) => {
            return (
              <li 
                key={`nav-${index}`}
                className={classnames("letter-nav__item", {"letter-nav__item--active": currentNav === item})}
                onClick={() => this.scrollTo(item)}
                >{item}</li>
            )
          })}
        </ul>
        <div className="page-body">
            {data.map(({type, list}, index) => {
              return (
                <div key={index}>
                  <h2 className="country-header" data-type={type}>{type === '0'? '常用' : type}</h2>
                  <ul className="country-list">
                    {list.map((val, key) => {
                      return (
                        <li className="country-item" key={`${index}-${key}`}>
                          <a className="country-item__link" href="#" onClick={(e) => this.toParentPage(e, val.num)}>
                            <span className="country-name">{val.name}</span>
                            <span className="country-num">+{val.num}</span>
                          </a>
                        </li>
                      )
                    })}
                    
                  </ul>
                </div>
              )
            })}
        </div>
      </>
    )
  }
}

export default connect(
  ({country}) =>({
    country
  }),
  (dispatch) => {
    return bindActionCreators(
      {
        addCountryNum
      },
      dispatch
    );
  }
)(Country);