import { BaseEventOrig, Button, InputProps } from '@tarojs/components';
import { useLoad } from '@tarojs/taro';

import { useCallback, useState } from 'react';

import BlFormCell from '@/components/bl-form-cell';
import BlFormInput from '@/components/bl-form-input';
import BlFormItem from '@/components/bl-form-item';
import SafeBottomPadding from '@/components/safe-bottom-padding';
import { PageUrl } from '@/constants/app';
import { navigateTo } from '@/utils/route';

import './index.less';

const PREFIX = 'page-job-publish-address';

export default function JobPublishAddress() {
  const [city, setCity] = useState('');
  const [county, setCounty] = useState('');
  const [detail, setDetail] = useState('');

  const handleClickEditDescribe = useCallback(() => navigateTo(PageUrl.JobPublishDescribe), []);

  const handleClickEditAddress = useCallback(() => navigateTo(PageUrl.JobPublishAddress), []);

  const handleInputAddressDetail = useCallback((e: BaseEventOrig<InputProps.inputEventDetail>) => {
    const value = e.detail.value || '';
    setDetail(value);
  }, []);

  const handleSubmit = useCallback(() => {}, []);

  useLoad(() => {
    console.log('Page loaded.');
  });

  return (
    <div className={PREFIX}>
      <div className={`${PREFIX}__tips`}>请提供真实有效地址，若查实造假，将受到处罚</div>
      <BlFormItem title="城市">
        <BlFormCell text={city} placeholder="请选择" onClick={handleClickEditDescribe} />
      </BlFormItem>
      <BlFormItem title="区">
        <BlFormCell text={county} placeholder="请选择" onClick={handleClickEditAddress} />
      </BlFormItem>
      <BlFormItem title="区">
        <BlFormInput value={detail} onInput={handleInputAddressDetail} />
      </BlFormItem>
      <div className={`${PREFIX}__footer`}>
        <Button className={`${PREFIX}__footer__submit`} onClick={handleSubmit}>
          保存
        </Button>
        <SafeBottomPadding />
      </div>
    </div>
  );
}
