import React from 'react';
import { Button, Input } from 'antd';
import { connect, DispatchProp } from 'dva';
import { formatMessage } from 'umi-plugin-locale';
import { CheckModelState } from './model';
import AreaSelection from '@/components/AreaSelection';

const CheckPage: React.FC<DispatchProp & CheckModelState> = ({
  areacodes,
  areacode,
  phone,
  submitting,
  dispatch,
}) => {
  return (
    <>
      <AreaSelection
        className="item"
        areacode={areacode}
        areacodes={areacodes}
        onChange={areacode => dispatch({ type: 'check/onUpdateState', areacode })}
        size="large"
      />

      <Input
        className="item"
        placeholder={formatMessage({ id: 'common.phoneHolder' })}
        value={phone}
        onChange={e => dispatch({ type: 'check/onUpdatePhone', payload: e.target.value })}
        size="large"
        type="tel"
      />

      <Button
        className="item gradient"
        type="primary"
        loading={submitting}
        onClick={() => dispatch({ type: 'check/submitCheck' })}
        size="large"
      >{formatMessage({ id: 'common.next' })}</Button>
    </>
  );
}

export default connect(
  ({ check } : any) => ({ ...check })
)(CheckPage) as any;
