import { Select, Space } from 'antd';
import { useEffect, useMemo, useState } from 'react';
const Country = () => {
  const subfix = document.documentElement.dataset.vanEnv || 'stg';
  const host = document.documentElement.dataset.vanIdc || 'cn';
  const [env, setEnv] = useState(subfix);
  const [idc, setIdc] = useState(host);
  const domainMap = {
    cn: {
      stg: 'uac-user-v-stg.huolala.work',
      pre: 'uac-user-v-pre.huolala.work',
      prod: 'uac-user-v.huolala.work',
    },
    sin: {
      stg: 'uac-user--stable-2.sg-van-stg.lalamove.work',
      pre: 'uac-user--stable-2.sg-van-pre.lalamove.work',
      prod: 'uac-user.sg-van.lalamove.work',
    },
    bom: {
      // stg: 'uac-user.van.uncle-delivery.work',
      // pre: 'uac-user.van.uncle-delivery.work',
      prod: 'uac-user.van.uncle-delivery.work',
    },
    sao: {
      // stg: 'uac-user.br-van.lalamove.work',
      // pre: 'uac-user.br-van.lalamove.work',
      prod: 'uac-user.br-van.lalamove.work',
    },
    xl: {
      stg: 'uac-user-v-stg.xlcx.work',
      pre: 'uac-user-v-pre.xlcx.work',
      prod: 'uac-user-v.xlcx.work',
    },
  };
  const domainIDCMap = useMemo(() => domainMap[idc.toLocaleLowerCase()], [idc]);
  const domain = useMemo(() => domainIDCMap[env.toLocaleLowerCase()], [domainIDCMap, env]);
  useEffect(() => {
    if (
      domain !== location.hostname &&
      !(location.hostname === 'localhost' && idc.toLocaleLowerCase() === 'cn')
    ) {
      location.href = `https://${
        domain || domainIDCMap.stg || domainIDCMap.pre || domainIDCMap.prod
      }`;
    }
  }, [domain, domainIDCMap, idc]);
  return (
    <Space size={0}>
      <Select
        bordered={false}
        value={idc}
        onChange={(value) => setIdc(value)}
        // style={{ width: 120 }}
        options={[
          {
            label: (
              <Space>
                <span>🇨🇳</span>
                <span>中国</span>
              </Space>
            ),
            value: 'cn',
          },
          {
            label: (
              <Space>
                <span>🇸🇬</span>
                <span>新加坡</span>
              </Space>
            ),
            value: 'sin',
          },
          {
            label: (
              <Space>
                <span>🇸🇮</span>
                <span>印度 </span>
              </Space>
            ),
            value: 'bom',
            // disabled: true,
          },
          {
            label: (
              <Space>
                <span>🇸🇧</span>
                <span>巴西 </span>
              </Space>
            ),
            value: 'sao',
            // disabled: true,
          },
          {
            label: (
              <Space>
                <span>🇨🇳</span>
                <span>小拉 </span>
              </Space>
            ),
            value: 'xl',
            // disabled: true,
          },
        ]}
      />
      <Select
        bordered={false}
        value={env}
        onChange={(value) => setEnv(value)}
        // style={{ width: 80 }}
        options={[
          {
            label: 'STG',
            value: 'stg',
            disabled: !domainMap[idc.toLocaleLowerCase()]['stg'],
          },
          {
            label: 'PRE',
            value: 'pre',
            disabled: !domainMap[idc.toLocaleLowerCase()]['pre'],
          },
          {
            label: 'PRD',
            value: 'prod',
          },
        ]}
      />
    </Space>
  );
};
export default Country;