import useTranslation from "next-translate/useTranslation";
import { useRouter } from "next/router";
import { useMemo, useState } from "react";
import Dropzone from "react-dropzone";
import { connect } from "react-redux";
import { Field, reduxForm } from "redux-form";
import { uploadFiles } from "../../actions";
import { bytesToSize } from "../utils";

const required = (errorMsg) => (value) =>
    value || typeof value === "number" ? undefined : errorMsg;

export const minLength = (errorMsg) => (value) =>
    value && value.length < 4
        ? errorMsg //`Must be ${min} characters or more`
        : undefined;

const RenderTextfield = ({
    id,
    className,
    rows,
    datafieldname,
    name,
    label,
    input,
    hint1,
    hint2,
    hint3,
    meta: { touched, error },
    ...custom
}) => {
    return (
        <>
            <div className="govuk-form-group">
                <div id="basicSearch-hint" className="govuk-hint ">
                    <label
                        className="govuk-label "
                        htmlFor={id}
                        id={id + "_label"}
                    >
                        <span className="govuk-body-s">{hint1}</span>
                    </label>
                </div>

                <div>
                    <input
                        {...input}
                        className={className}
                        name={name}
                        id={id}
                    />
                    {touched && error && (
                        <span
                            id={id + "-error"}
                            className="govuk-error-message govuk-form-group--error"
                        >
                            <span className="govuk-visually-hidden">
                                Error:
                            </span>{" "}
                            {error}
                        </span>
                    )}
                </div>
            </div>
        </>
    );
};

const baseStyle = {
    display: "flex",
    flexDirection: "column",
    alignItems: "center",
    padding: "20px",
    borderWidth: 2,
    borderRadius: 2,
    borderColor: "#eeeeee",
    borderStyle: "dashed",
    backgroundColor: "#fafafa",
    color: "#bdbdbd",
    transition: "border .3s ease-in-out",
    width: "80%",
    margin: "20px auto 30px",
};

const activeStyle = {
    borderColor: "#2196f3",
};

const acceptStyle = {
    borderColor: "#00e676",
};

const rejectStyle = {
    borderColor: "#ff1744",
};
const RenderFileUpload = (field) => {
    const files = field.input.value;
    const style = useMemo(
        () => ({
            ...baseStyle,
            // ...(isDragActive ? activeStyle : {}),
            // ...(isDragAccept ? acceptStyle : {}),
            // ...(isDragReject ? rejectStyle : {}),
        }),
        []
        // [isDragActive, isDragReject, isDragAccept]
    );
    const [filesList, setFilesList] = useState([]);

    const thumbs = filesList.map((file) => (
        <div key={file.name} className="govuk-!-margin-bottom-5 fileThumb">
            <img src={file.preview} alt={file.name} width="50" /> -{" "}
            <span className="govuk-body">
                {file.name} ({file.size / 1024}kb)
            </span>
        </div>
    ));

    const getThumbnailIcon = (fileObj, fileType) => {
        switch (fileType) {
            case "text/html":
                return "/assets/images/documenttypes/html.png";
                break;
            case "text/plain":
                return "/assets/images/documenttypes/txt.png";
                break;
            case "application/msword":
                return "/assets/images/documenttypes/doc.png";
                break;
            case "application/pdf":
                return "/assets/images/documenttypes/pdf.png";
                break;
            case "application/vnd.openxmlformats-officedocument.wordprocessingml.document":
                return "/assets/images/documenttypes/docx.png";
                break;
            case "text/csv":
                return "/assets/images/documenttypes/csv.png";
                break;
            case "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet":
                return "/assets/images/documenttypes/xlsx.png";
                break;

            case "application/zip":
                return "/assets/images/documenttypes/zip.png";
                break;
            case "image/jpeg":
            case "image/png":
                return URL.createObjectURL(fileObj);
                break;
        }
    };

    const getDocumentType = (docCode) => {
        switch (docCode) {
            case "000001":
                return "000001";
                break;
            case "000002":
                return "000002";
                break;
            case "000003":
                return "000003";
                break;
            case "000004":
                return "000004";
                break;
            case "000005":
                return "000005";
                break;
            case "000006":
                return "000006";
                break;
            case "000007":
                return "000007";
                break;
            case "000008":
                return "000008";
                break;
            case "000009":
                return "000009";
                break;
            case "000010":
                return "000010";
                break;
            case "000011":
                return "000011";
                break;
            case "000012":
                return "000012";
                break;
            case "000013":
                return "000013";
                break;
            case "000014":
                return "000014";
                break;
            case "000015":
                return "000015";
                break;

            default:
                return "000000";
        }
    };

    return (
        <div>
            <Dropzone
                // onDrop={(filesToUpload, e) =>
                //     field.input.onChange(filesToUpload)
                // }

                onDrop={(filesToUpload, e) => {
                    console.log(field.ticketnumber, field.documentTypeCode);
                    const renamedAcceptedFiles = filesToUpload.map(
                        (file) =>
                            new File(
                                [file],
                                `${field.ticketnumber}_${getDocumentType(
                                    field.documentTypeCode
                                )}_${file.name}`,
                                {
                                    type: file.type,
                                }
                            )
                    );
                    field.input.onChange(renamedAcceptedFiles);
                }}
            >
                {({ getRootProps, getInputProps }) => (
                    <div className="govuk-grid-row">
                        <div className="govuk-form-group"></div>
                        <section className="container">
                            <div {...getRootProps({ style })}>
                                {" "}
                                <input {...getInputProps()} />
                                <div>Drag and drop your files here.</div>
                            </div>
                            <aside>{thumbs}</aside>
                        </section>
                    </div>
                )}
            </Dropzone>

            {field.meta.touched && field.meta.error && (
                <span className="error">{field.meta.error}</span>
            )}
            {files && Array.isArray(files) && (
                <ul>
                    {files.map((file, i) => (
                        <div
                            key={file.name}
                            className="govuk-!-margin-bottom-5 fileThumb"
                        >
                            <img
                                src={getThumbnailIcon(file, file.type)}
                                alt={file.name}
                                width="50"
                            />{" "}
                            {"  "}
                            <span className="govuk-body govuk-!-padding-left-5">
                                {file.name} ({bytesToSize(file.size)})
                            </span>
                        </div>
                    ))}
                </ul>
            )}
        </div>
    );
};

let UploadFile = (props) => {
    let { t } = useTranslation();
    //const [showSpinnerState, setShowSpinnerState] = useState(false);
    const { handleSubmit, pristine, reset, submitting, formContent } = props;

    const router = useRouter();
    const { locale } = router;

    const onHandleSubmit = async (values) => {
        //spinnerState();
        console.log(values);
        console.log(formContent);
        // getContainers();

        var dataObj = Object.assign(values, formContent);
        var fileObj = dataObj.fileList;

        delete dataObj.fileList;

        const uploadAction = await uploadFiles(dataObj, fileObj).then(
            (data) => {
                console.log("$1", data);
            }
        );
        // router.push({
        //     pathname:
        //         router.locale == "cy"
        //             ? "/fymhorth/canlyniadauchwilio"
        //             : "/myportal/searchresults",
        //     query: { q: values.basicSearch },
        //     shallow: true,
        // });
    };

    return (
        <div className="card" id="casesearch-card">
            <div className="card-body">
                <h3 className="heading-small card-heading">Upload a file</h3>
                <div className="govuk-form-group">
                    <p className="govuk-body-s">reqweqwe eqwe qwe qwe qwe</p>
                </div>
                <form onSubmit={handleSubmit(onHandleSubmit)}>
                    <div className="govuk-form-group">
                        <Field
                            validate={[
                                required(
                                    t(
                                        "myportal:searchcases-validation-required"
                                    )
                                ),
                                minLength(
                                    t(
                                        "myportal:searchcases-validation-minlength"
                                    )
                                ),
                            ]}
                            className="govuk-input"
                            component={RenderTextfield}
                            id="caseReference"
                            name="caseReference"
                            type="text"
                            aria-describedby="caseReference-hint"
                            hint1="Case Reference"
                            value="CAS-00764-L0Q9W2"
                        />
                    </div>
                    <div className="govuk-grid-row">
                        <Field
                            name="fileList"
                            id="fileList"
                            component={RenderFileUpload}
                            className="govuk-input govuk-input--width-20"
                            //validate={[required]}
                            label={props.label}
                            errorMsg="Is required"
                            ticketnumber="CAS-00764-L0Q9W2"
                        />
                    </div>
                    <div className="govuk-form-group">
                        <button type="submit" className="govuk-button">
                            Add Files
                        </button>
                    </div>
                </form>
            </div>
        </div>
    );
};

const mapStateToProps = (state) => {
    return {
        currentView: state.currentView,
        search: state.search,
        searchResultsObj: state.searchResultsObj,
        formData: state.formData,
        appealType: state.appealType,
        //form: state.form,
        myCases: state.myCases,
        watchedCases: state.watchedCases,
        myRepresentations: state.myRepresentations,
        awaitingSubmission: state.awaitingSubmission,
        formContent: {
            "pinswg_caserecovered": "No",
            "pinswg_siteaddresspostcode": "Site address postcode",
            "pinswg_inspectorneededonsite": "Yes",
            "pinswg_sitewithingreenbelt": "No",
            "pinswg_siteaddressline2": "Site address line 2",
            "pinswg_siteaddressline1": "Site address line 1",
            "pinswg_s106unilateralsubmitted": "No",
            "modifiedon": "2022-06-28T13:11:34Z",
            "pinswg_developmentaffectsettingofalisted": "No",
            "pinswg_planningappeals78id":
                "57b533aa-43f1-ec11-aade-00224800be9c",
            "pinswg_name": "CAS-00764-L0Q9W2",
            "pinswg_whyisinspectorneededonsite": "to be nosey",
            "pinswg_sitewithinsssi": "No",
            "pinswg_healthandsafetyissuesonsite": "No",
            "pinswg_developmentdescriptionchanged": "Yes",
            "_stageid_value": "126e9c46-d51c-4623-aabf-aa30b34bfa54",
            "traversedpath": "126e9c46-d51c-4623-aabf-aa30b34bfa54",
            "createdon": "2022-06-21T09:22:29Z",
            "timezoneruleversionnumber": 0,
            "processid": "e4f065a6-157e-42f9-963a-9292d5041509",
            "pinswg_priornotificationpriorapproval": "No",
            "pinswg_predeterminedindicator": "No",
            "pinswg_protectedspecies": "No",
            "versionnumber": 912609,
            "pinswg_siteaddresscounty": "Site address county",
            "pinswg_procedure": 846040000,
            "pinswg_dateoflpadecision": "2022-06-22T23:00:00Z",
            "pinswg_eiarequired": "No",
            "pinswg_costappliedforindicator": "No",
            "pinswg_areaofsiteinhectaresdec": 22,
            "pinswg_detailedeiascreeningrequired": "No",
            "pinswg_casepublishflag": "No",
            "pinswg_siteaddresstown": "Site address town",
            "utcconversiontimezonecode": 85,
            "pinswg_caseworkreason": 846040005,
            "pinswg_ownershipcertificate": 846040002,
            "pinswg_lpadecisiononapplicationmade": "Yes",
            "pinswg_floorspaceinsquaremeters": 111,
            "_modifiedby_value": "149b3e11-5206-ec11-aac8-00224800be9c",
            "pinswg_dateofapplication": "2022-06-20T23:00:00Z",
            "pinswg_incarelatestoca": "No",
            "_createdby_value": "149b3e11-5206-ec11-aac8-00224800be9c",
            "pinswg_additionalappealsmade": "No",
            "statuscode": 1,
            "pinswg_siteviewablefromroad": "Yes",
            "_pinswg_localplanningauthority_value":
                "744c69f4-48da-eb11-aac5-00224800be9c",
            "pinswg_lpaapplicationreference": "11111weweqweqwe",
            "pinswg_recovered": "No",
            "statecode": 0,
            "pinswg_isfloodingandissue": "No",
            "pinswg_isthesitewithinanaonb": "No",
            "_organizationid_value": "01191a4d-105f-eb11-aaba-00224800be9c",
            "pinswg_developmentdescription": "something to go here",
            "pinswg_agriculturalholding": 846040000,
            "_pinswg_planningappeals78ids_value":
                "50b533aa-43f1-ec11-aade-00224800be9c",
        },
        initialValues: {
            caseReference: "CAS-00764-L0Q9W2",
        },
    };
};

const mapDispatchToProps = (dispatch) => {
    return {};
};

export default connect(
    mapStateToProps,
    mapDispatchToProps
)(
    reduxForm({
        form: "uploadFileForm",
        destroyOnUnmount: false,
        enableReinitialize: true, // this is needed!!
    })(UploadFile)
);