import { ModalForm, ProFormText } from '@ant-design/pro-form';
import { FormattedMessage, useIntl } from '@umijs/max';

interface EditModalProps {
  visible: boolean;
  values: {
    name?: string;
    address?: string;
    group_id?: string;
    external_id?: string;
    type?: string;
  };
  onVisibleChange: (visible: boolean) => void;
  onFinish: (
    values: Pick<MasterModel.Thing, 'name'> &
      Pick<MasterModel.ThingMetadata, 'address' | 'external_id'>,
  ) => Promise<boolean>;
}

const EditModal: React.FC<EditModalProps> = ({
  visible,
  values,
  onVisibleChange,
  onFinish,
}) => {
  const intl = useIntl();

  return (
    <ModalForm
      open={visible}
      initialValues={values}
      title={intl.formatMessage({
        id: 'pages.things.update.title',
        defaultMessage: 'Update thing',
      })}
      width={480}
      onVisibleChange={onVisibleChange}
      onFinish={onFinish}
      modalProps={{
        destroyOnHidden: true,
      }}
    >
      <ProFormText
        name="name"
        label={intl.formatMessage({
          id: 'pages.things.name',
          defaultMessage: 'Name',
        })}
        rules={[
          {
            required: true,
            message: (
              <FormattedMessage
                id="pages.things.name.required"
                defaultMessage="The name is required"
              />
            ),
          },
        ]}
      />

      <ProFormText
        name="external_id"
        label={intl.formatMessage({
          id: 'pages.things.external_id',
          defaultMessage: 'ExternalId',
        })}
        rules={[
          {
            required: true,
            message: (
              <FormattedMessage
                id="pages.things.external_id.required"
                defaultMessage="The externalId is required"
              />
            ),
          },
        ]}
      />

      <ProFormText
        name="address"
        label={intl.formatMessage({
          id: 'pages.things.address',
          defaultMessage: 'Address',
        })}
        rules={[
          {
            required: true,
            message: (
              <FormattedMessage
                id="pages.things.address.required"
                defaultMessage="The address is required"
              />
            ),
          },
        ]}
      />
    </ModalForm>
  );
};

export default EditModal;