form

import React, {useEffect, useMemo} from "react";
import {Button, Col, Form, FormFeedback, FormGroup, Input, Label, Row,} from "reactstrap";
import PropTypes from "prop-types";
import DatePickerWrapper from "common/DatePickerWrapper";
import {Controller, useForm} from "react-hook-form";
import {getMaximumCharacterMessage, onlyAllowSomeSpecialCharacterError, requiredMessage,} from "common/validateMessage";
import {useHistory} from "react-router-dom";

const AlertForm = ({
                     mode,
                     defaultData,
                     onUpsertAlert,
                     upsertLoading,
                   }) => {

  const {control, errors, handleSubmit} = useForm({
    mode: "onChange",
    reValidateMode: "onChange",
    defaultValues: useMemo(() => {
      return defaultData;
    }, [defaultData]),
  });
  const history = useHistory();


  const handleDateForm = (arg, callback) => {
    return callback(arg);
  };
  
  useEffect(() => {
    console.log("defaultData", defaultData.viContent);
  }, [defaultData]);
  return (
    <>
      <Row>
        {(mode === "create" || mode === "edit") && (
          <div className="d-flex justify-content-end w-100 ">
            <Button
              className="mr-1"
              color="danger"
              onClick={() => {
                history.push("/alerts");
              }}
            >
              <i className="fa fa-times mr-1"></i>Hủy
            </Button>
            <Button
              color="primary"
              onClick={handleSubmit(onUpsertAlert)}
              disabled={upsertLoading}
            >
              <i className="fa fa-save mr-1"></i>Lưu
            </Button>
          </div>
        )}
      </Row>
      <Form>
        {mode === "view" && (
          <Row>
            <h2>{defaultData?.titleVn}</h2>
          </Row>
        )}
        {(mode === "edit" || mode === "create") && (
          <Row>
            <FormGroup className="w-100 required">
              <Label for="titleVn" check>
                Tiêu đề tiếng Việt
              </Label>
              <Controller
                name="titleVn"
                control={control}
                rules={{
                  required: "Vui lòng nhập Tiêu đề tiếng Việt",
                  maxLength: {
                    value: 255,
                    message: getMaximumCharacterMessage(255),
                  },
                }}
                render={({onChange, value}) => (
                  <Input
                    invalid={!!errors["titleVn"]}
                    id="titleVn"
                    name="titleVn"
                    readOnly={mode === "view"}
                    value={value}
                    onChange={onChange}
                  />
                )}
              />
              {errors["titleVn"]?.type && (
                <FormFeedback>{errors["titleVn"]?.message}</FormFeedback>
              )}
            </FormGroup>
          </Row>
        )}
        {mode === "view" && (
          <Row>
            <h2>{defaultData?.titleEn}</h2>
          </Row>
        )}
        {(mode === "edit" || mode === "create") && (
          <Row>
            <FormGroup className="w-100 required">
              <Label for="titleEn" check>
                Tiêu đề tiếng Anh
              </Label>
              <Controller
                name="titleEn"
                control={control}
                rules={{
                  required: "Vui lòng nhập Tiêu đề tiếng Anh",
                  maxLength: {
                    value: 255,
                    message: getMaximumCharacterMessage(255),
                  },
                }}
                render={({onChange, value}) => (
                  <Input
                    invalid={!!errors["titleEn"]}
                    id="titleEn"
                    name="titleEn"
                    readOnly={mode === "view"}
                    value={value}
                    onChange={onChange}
                  />
                )}
              />
              {errors["titleEn"]?.type && (
                <FormFeedback>{errors["titleEn"]?.message}</FormFeedback>
              )}
            </FormGroup>
          </Row>
        )}
        <Row>
          <FormGroup className="w-100 required">
            <Label for="viContent">Nội dung Tiếng Việt</Label>
            <Controller
              control={control}
              name="viContent"
              rules={{
                required: "Vui lòng nhập Nội dung thông báo",
                pattern: {
                  value: /^[\p{Letter}0-9-_/%*()#!:,.;?=+\s]*$/u,
                  message: onlyAllowSomeSpecialCharacterError,
                },
                maxLength: {
                  value: 500,
                  message: getMaximumCharacterMessage(500),
                },
              }}
              render={({onChange, value}) => (
                <Input
                  invalid={!!errors["viContent"]}
                  id="viContent"
                  name="viContent"
                  type="textarea"
                  readOnly={mode === "view"}
                  value={value}
                  onChange={onChange}
                />
              )}
            />
            {errors["viContent"]?.type && (
              <FormFeedback>{errors["viContent"]?.message}</FormFeedback>
            )}
          </FormGroup>
        </Row>
        <Row>
          <FormGroup className="w-100">
            <Label for="enContent">Nội dung Tiếng Anh</Label>
            <Controller
              control={control}
              name="enContent"
              rules={{
                pattern: {
                  value: /^[\w/%*()#!:,.;?=+\s-]*$/u,
                  message:
                    onlyAllowSomeSpecialCharacterError +
                    ", không chấp nhận Tiếng Việt",
                },
                maxLength: {
                  value: 500,
                  message: getMaximumCharacterMessage(500),
                },
              }}
              render={({onChange, value}) => (
                <Input
                  invalid={!!errors["enContent"]}
                  id="enContent"
                  name="enContent"
                  type="textarea"
                  readOnly={mode === "view"}
                  value={value}
                  onChange={onChange}
                />
              )}
            />
            {errors["enContent"]?.type && (
              <FormFeedback>{errors["enContent"]?.message}</FormFeedback>
            )}
          </FormGroup>
        </Row>
        <Row>
          <FormGroup inline className="required">
            <Label>Thời gian áp dụng</Label>
            <Row>
              <Col xl={6} className="mb-1">
                <Controller
                  control={control}
                  name="fromDate"
                  rules={{
                    required: requiredMessage,
                  }}
                  defaultValue={new Date()}
                  render={({onChange, value}) => (
                    <DatePickerWrapper
                      type="date"
                      style={{maxWidth: 300}}
                      readOnly={mode === "view"}
                      selected={value}
                      onChange={(e) => handleDateForm(e, onChange)}
                      className={errors["fromDate"] ? "is-invalid" : ""}
                    />
                  )}
                />
                {errors["fromDate"]?.type && (
                  <FormFeedback
                    className="invalid-feedback"
                    style={{display: "block"}}
                  >
                    {errors["fromDate"]?.message}
                  </FormFeedback>
                )}
              </Col>
              <Col xl={6}>
                <Controller
                  control={control}
                  name="toDate"
                  defaultValue={new Date()}
                  rules={{
                    required: requiredMessage,
                  }}
                  render={({onChange, value}) => (
                    <DatePickerWrapper
                      type="date"
                      style={{maxWidth: 300}}
                      readOnly={mode === "view"}
                      selected={value}
                      onChange={onChange}
                      className={errors["toDate"] ? "is-invalid" : ""}
                    />
                  )}
                />
                {errors["toDate"]?.type && (
                  <FormFeedback
                    className="invalid-feedback"
                    style={{display: "block"}}
                  >
                    {errors["toDate"]?.message}
                  </FormFeedback>
                )}
              </Col>
            </Row>
          </FormGroup>
        </Row>
      </Form>
    </>
  );
};

AlertForm.propTypes = {
  mode: PropTypes.oneOf(["view", "edit", "create"]),
  setMode: PropTypes.func,
  defaultData: PropTypes.object,
};

export default AlertForm;