// @ts-nocheck
import React, { useCallback } from 'react';
import { Checkbox, Form } from 'antd4';
import styles from './styles.less';
import { FM, FormattedMessage } from '@/locales';
import { Check } from '../form_items';

const Agreement = (props) => {
  const { form } = props;

  const handleCheckBoxChange = useCallback(() => {
    if (form) {
      const currAgreement = form.getFieldValue('agreement');
      form.setFieldsValue({
        agreement: !currAgreement,
      });
    }
  }, [form]);

  return (
    <div className={styles.info}>
      <Form.Item
        valuePropName="checked"
        name={'agreement'}
        style={{ display: 'inline', marginBottom: '0' }}
        rules={[
          {
            required: 'true',
            message: FormattedMessage({
              id: 'common.agreement.link.protocol.error',
              defaultMessage:
                '! User agreement and privacy terms are not checked',
            }),
          },
        ]}
      >
        {/* <Checkbox.Group> */}
        <Checkbox className={styles.check}>
          <span className={styles.desc}>
            <span>
              <FM id="common.agreement.title" defaultMessage="Read and agree" />
            </span>
            <a href="/protocol" target="_blank">
              <FM id="common.agreement.link.protocol" defaultMessage="Policy" />
            </a>
            <span>
              <FM id="common.agreement.and" defaultMessage="and" />
            </span>
            <a href="/policy" target="_blank">
              <FM id="common.agreement.link.policy" defaultMessage="Contact" />
            </a>
          </span>
        </Checkbox>
        {/* </Checkbox.Group> */}
      </Form.Item>
    </div>
  );
};

export default Agreement;