import React, { useState } from "react";
import {
  RegionSelect,
  RegionPanel,
  RegionOption,
} from "@tencent/tea-component";

export default function RegionSelectExample() {
  const [region, setRegion] = useState("gz");

  const { Head, Column, Group } = RegionPanel;

  return (
    <RegionSelect
      value={region}
      onChange={value => setRegion(value)}
      moreInfo="其它地域 20"
      shortcut={{
        cacheKey: "tea-region-select-demo",
      }}
    >
      <RegionPanel>
        <Head>全部地域</Head>
        <Column>
          <Group name="中国">
            <RegionOption value="gz" num={20}>
              广州
            </RegionOption>
            <RegionOption value="sh" num={20} dot>
              上海
            </RegionOption>
            <RegionOption value="hk">香港</RegionOption>
          </Group>
          <Group name="游戏专区">
            <RegionOption value="bj">北京</RegionOption>
          </Group>
        </Column>
        <Column>
          <Group name="亚洲">
            <RegionOption value="ia" num={20}>
              印度
            </RegionOption>
            <RegionOption value="ko">韩国</RegionOption>
            <RegionOption value="ta">泰国</RegionOption>
            <RegionOption value="sg">新加坡</RegionOption>
            <RegionOption value="jp" disabled>
              日本
            </RegionOption>
          </Group>
        </Column>
        <Column>
          <Group name="北美洲">
            <RegionOption value="gg">硅谷</RegionOption>
            <RegionOption value="dld">多伦多</RegionOption>
          </Group>
        </Column>
        <Column>
          <Group name="欧洲">
            <RegionOption value="fl">法兰克福</RegionOption>
            <RegionOption value="mo">莫斯科</RegionOption>
          </Group>
        </Column>
      </RegionPanel>
    </RegionSelect>
  );
}
