/**
 * Title: 地产详情
 * Routes:
 *   - ./src/pages/routes
 */
import React, { useState } from 'react';
import { connect, DispatchProp } from 'dva';
import { formatMessage } from 'umi-plugin-locale';
import Header from '@/components/Header';
import AccountItem from '@/components/AccountItem';
import ChoiceModal from '@/components/ChoiceModal';
import { UserModelState } from '@/models/user';
import { fromLangToText, supportedLangs } from '@/utils/transform';

import styles from './style.less';

const langs = supportedLangs.map(it => ({
  key: it.lang,
  value: it.text,
}));

const SystemPage: React.FC<DispatchProp & UserModelState> = ({
  dispatch,
  lang,
}) => {
  const [langVisible, setLangVisible] = useState(false);

  const onItemSelected = (key: string) => {
    setLangVisible(false);
    dispatch({ type: 'user/changeLang', payload: key });
  };

  const langModal = (
    <ChoiceModal
      closable={false}
      data={langs}
      selectedKey={lang}
      onItemSelected={onItemSelected}
      visible={langVisible}
      onCancel={() => setLangVisible(false)}
      title={formatMessage({ id: 'system.chooseLang' })}
    />
  );

  return (
    <div className={styles.container}>
      <Header
        className={styles.header}
        title={formatMessage({ id: 'system.title' })}
      />
      <div className={styles.content}>
        <AccountItem
          className="group"
          title="system.language"
          preview={fromLangToText(lang)}
          onClick={() => setLangVisible(true)}
        />
        <AccountItem
          className="group"
          title="system.currency"
        />
      </div>
      {langModal}
    </div>
  );
};

export default connect(
  ({ user }: any) => ({ ...user }),
)(SystemPage);
