import React, { useEffect } from "react";
import { Field } from "redux-form";
import useTranslation from "next-translate/useTranslation";
import { RenderTextfield } from "./renderTextfield";
import { RenderDatePicker } from "./renderDatePicker";

export const RenderSubFields = ({
    fields,
    meta: { touched, error },
    ...custom
}) => {
    let { t } = useTranslation();

    let subTitle = fields.name.split("pinswg_")[1];

    const checkValue = (value) => {
        let errors;

        if (!value) {
            errors = t("newappeal:is-required-label");
        } else {
            const emojiRegex =
                /[\u{1F600}-\u{1F64F}\u{1F300}-\u{1F5FF}\u{1F680}-\u{1F6FF}\u{1F700}-\u{1F77F}\u{1F780}-\u{1F7FF}\u{1F800}-\u{1F8FF}\u{1F900}-\u{1F9FF}\u{1FA00}-\u{1FA6F}\u{1FA70}-\u{1FAFF}\u{2600}-\u{26FF}\u{2700}-\u{27BF}\u{2300}-\u{23FF}\u{2B50}\u{1F004}-\u{1F0CF}\u{1F0A0}-\u{1F0A5}\u{1F170}-\u{1F251}]/gu;

            if (emojiRegex.test(value)) {
                errors = "Emojis are not allowed";
            }
        }

        return errors;
    };

    const required = (value) =>
        value ? undefined : t("newappeal:is-required-label");

    const email = (value) => {
        let errors;

        const emailRegex =
            /(?:[a-z0-9!#$%&'*+\/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+\/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])/gi;

        if (!emailRegex.test(value)) {
            errors = t("newappeal:invalid-email-address-errormsg");
        }
        return errors;
    };

    useEffect(() => {
        if (fields.length === 0) {
            fields.push({});
        }
    }, [fields, fields.length]);

    return (
        <ul className="subFieldList">
            {fields.map((member, index) => (
                <div key={index}>
                    <h4>
                        {subTitle == "owners" ? "Owner" : "Tenant"} #{index + 1}
                    </h4>

                    <div className="fieldArrayContainer">
                        <div className="govuk-grid-column-full">
                            <div
                                className="gouk-grid-row"
                                style={{
                                    display: "flex",
                                    marginBottom: "20px"
                                }}
                            >
                                <Field
                                    id={`${member}.${fields.name}_firstname`}
                                    name={`${member}.${fields.name}_firstname`}
                                    type="text"
                                    component={RenderTextfield}
                                    validate={[checkValue]}
                                    label={"First name"}
                                    className="govuk-input govuk-input--width-12"
                                    showErrorBottom={true}
                                />
                                <Field
                                    id={`${member}.${fields.name}_lastname`}
                                    name={`${member}.${fields.name}_lastname`}
                                    type="text"
                                    component={RenderTextfield}
                                    validate={[checkValue]}
                                    label={"Last name"}
                                    className="govuk-input govuk-input--width-12"
                                    showErrorBottom={true}
                                />
                            </div>
                            <div
                                className="gouk-grid-row"
                                style={{ display: "flex" }}
                            >
                                <Field
                                    id={`${member}.${fields.name}_email`}
                                    name={`${member}.${fields.name}_email`}
                                    type="text"
                                    component={RenderTextfield}
                                    validate={[email]}
                                    label={"Email"}
                                    className="govuk-input govuk-input--width-12"
                                    showErrorBottom={true}
                                />
                                <Field
                                    name={`${member}.dateserved`}
                                    type="text"
                                    component={RenderDatePicker}
                                    label="Date served "
                                    dateStart={"-6m"}
                                    dateEnd={"0"}
                                    validate={[required]}
                                    className="govuk-input govuk-input--width-12"
                                    showErrorBottom={true}
                                />
                            </div>
                        </div>
                        <div
                            className="gouk-grid-row"
                            style={{ display: "flex" }}
                        >
                            <button
                                type="button"
                                title="Remove"
                                onClick={() => fields.remove(index)}
                                className="govuk-button fieldArrayDelete"
                            >
                                X
                            </button>
                        </div>
                    </div>
                </div>
            ))}

            <br />
            {fields.length < custom.maxSubField && (
                <button
                    type="button"
                    className="govuk-link fieldArrayLink"
                    onClick={() => fields.push({})}
                >
                    {subTitle == "owners"
                        ? t("newappeal:new-appeal-add-owner-label")
                        : t("newappeal:new-appeal-add-tenant-label")}
                </button>
            )}
        </ul>
    );
};