import { Field, Fields, reduxForm } from "redux-form";
import router from "next/router";
import React, { useState, useMemo } from "react";
import useTranslation from "next-translate/useTranslation";
import jsonpath from "jsonpath";
import Dropzone, { useDropzone } from "react-dropzone";
import Link from "next/link";
import dynamic from "next/dynamic";
const ReactQuill = dynamic(() => import("react-quill"), { ssr: false });
import "react-quill/dist/quill.snow.css";

export const RenderRadioList = ({
    datafieldname,
    name,
    label,
    id,
    errorMsg,
    options,
    input: { onChange, value },
    meta: { touched, error },
    ...custom
}) => {
    const required = (value) => (value ? undefined : "Required");

    return (
        <>
            <div
                className={
                    touched && error
                        ? "govuk-form-group govuk-form-group--error"
                        : "govuk-form-group "
                }
            >
                <fieldset
                    className="govuk-fieldset"
                    aria-describedby={name + "-hint"}
                >
                    <legend className="govuk-fieldset__legend govuk-fieldset__legend--s govuk-!-font-weight-regular">
                        <label
                            className="govuk-fieldset__heading govuk-body-m"
                            id={id + "_label"}
                        >
                            {label}
                        </label>
                    </legend>
                    {touched && error && (
                        <span
                            id={id + "-error"}
                            className="govuk-error-message"
                        >
                            <span className="govuk-visually-hidden">
                                Error:
                            </span>{" "}
                            {errorMsg}
                        </span>
                    )}
                    <div className="govuk-radios govuk-radios--small">
                        {Object.keys(options).map((key, index) => (
                            <div
                                className="govuk-radios__item"
                                data-children-count={key}
                                key={key}
                            >
                                <Field
                                    id={id + "_" + index}
                                    name={id}
                                    component="input"
                                    type="radio"
                                    className="govuk-radios__input"
                                    value={options[key]}
                                />
                                <label
                                    className="govuk-label govuk-radios__label"
                                    htmlFor={id + "_" + index}
                                >
                                    {options[key]}
                                </label>
                            </div>
                        ))}
                    </div>
                </fieldset>
            </div>
        </>
    );
};

export const RenderPickList = ({
    datafieldname,
    name,
    label,
    input,
    optionsArr,
    meta: { touched, errorStr },
}) => {
    return (
        <div>
            <select {...input} className="govuk-select " id={name} name={name}>
                <option>Select...</option>
                {Object.keys(optionsArr).map((key, index) => {
                    return (
                        <option key={key} value={optionsArr[key]}>
                            {optionsArr[key]}
                        </option>
                    );
                })}
            </select>

            {touched && errorStr && <span>{errorStr}</span>}
        </div>
    );
};

export const RenderTextfield = ({
    id,
    rows,
    datafieldname,
    name,
    label,
    input,
    errorMsg,
    type,
    className,
    meta: { touched, error },
    ...custom
}) => {
    return (
        <>
            <label className="govuk-label " htmlFor={id} id={id + "_label"}>
                {label}
            </label>
            {touched && error && (
                <span id={id + "-error"} className="govuk-error-message">
                    <span className="govuk-visually-hidden">Error:</span>{" "}
                    {errorMsg}
                </span>
            )}
            <input
                {...input}
                className={className}
                name={name}
                id={id}
                type={type}
            />
        </>
    );
};

export const RenderMultiline = ({
    id,
    className,
    rows,
    datafieldname,
    name,
    label,
    input,
    meta: { touched, error },
    ...custom
}) => {
    const [editValue, setEditValue] = useState(
        input.value != null ? input.value : ""
    );

    const changeEdit = (valStr) => {
        setEditValue(valStr);
        input.onChange(valStr);
    };

    var modules = {
        toolbar: [
            [{ "header": [1, 2, false] }],
            ["bold", "italic", "underline", "blockquote"],
            [{ "list": "ordered" }, { "list": "bullet" }],
            ["clean"],
        ],
    };

    return (
        <>
            <ReactQuill
                modules={modules}
                theme="snow"
                value={editValue}
                onChange={changeEdit}
            />
            <textarea
                {...input}
                id={id}
                name={name}
                rows={rows}
                className={className}
                value={editValue}
                style={{ display: "none" }}
            ></textarea>
        </>
    );
};

export function MultiLinefield(props) {
    const { name, label } = props;

    return (
        <div className="govuk-form-group">
            <h1 className="govuk-label-wrapper">
                <label className="govuk-label" htmlFor={props.name}>
                    {props.label}
                </label>
            </h1>
            <div
                id={props.name + "-hint"}
                className="govuk-hint govuk-!-font-size-14"
            >
                Do not include personal or financial information, like your
                National Insurance number or credit card details.
            </div>

            <Field
                name={props.name}
                id={props.name}
                component={RenderMultiline}
                type="text"
                rows="5"
                className="govuk-textarea govuk-input--width-30"
                aria-describedby={props.name + "-hint"}
            />
        </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",
};

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

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

const rejectStyle = {
    borderColor: "#ff1744",
};

export const RenderFileUpload = (field) => {
    const files = field.input.value;
    let { t } = useTranslation();

    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>
    ));

    function bytesToSize(bytes) {
        var sizes = ["Bytes", "KB", "MB", "GB", "TB"];
        if (bytes == 0) return "0 Byte";
        var i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)));
        return Math.round(bytes / Math.pow(1024, i), 2) + " " + sizes[i];
    }

    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;
            default:
                return "/assets/images/documenttypes/txt.png";
                break;
        }
    };

    const getThumbnailIconByExtension = (blobName) => {
        let fileType = blobName.slice(blobName.lastIndexOf(".") + 1);

        switch (fileType) {
            case "html":
                return "/assets/images/documenttypes/html.png";
                break;
            case "txt":
                return "/assets/images/documenttypes/txt.png";
                break;
            case "doc":
                return "/assets/images/documenttypes/doc.png";
                break;
            case "pdf":
                return "/assets/images/documenttypes/pdf.png";
                break;
            case "docx":
                return "/assets/images/documenttypes/docx.png";
                break;
            case "csv":
                return "/assets/images/documenttypes/csv.png";
                break;
            case "xlsx":
                return "/assets/images/documenttypes/xlsx.png";
                break;

            case "zip":
                return "/assets/images/documenttypes/zip.png";
                break;
            case "jpeg":
            case "jpg":
                return "/assets/images/documenttypes/jpg.png";
            case "png":
                return "/assets/images/documenttypes/png.png";
                break;
            default:
                return "/assets/images/documenttypes/txt.png";
                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";
        }
    };

    const filelistObj = field.fileList || {};

    const blobList = jsonpath.query(
        filelistObj,
        "$..[?(@.documentType=='" + field.documentTypeCode + "')]"
    );

    const deleteThisBlob = async (
        containerName,
        blobName,
        deleteblobhash,
        getblobshash,
        casefolderID
    ) => {
        //console.log(containerName, blobName, deleteblobhash);
        deleteBlob(containerName, blobName, deleteblobhash, casefolderID)
            .then((data) => data)
            .then(() => {
                getFilesFromBlobHashed(
                    containerName,
                    getblobshash,
                    casefolderID
                ).then((newfilelist) => field.setFilesForAppeal(newfilelist));
            });
    };

    return (
        <>
            <Dropzone
                accept="application/pdf,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,image/tiff,image/jpeg,application/zip"
                onDrop={(filesToUpload, e) => {
                    const renamedAcceptedFiles = filesToUpload.map(
                        (file) =>
                            new File(
                                [file],
                                `${getDocumentType(field.documentTypeCode)}_${
                                    file.name
                                }`,
                                {
                                    type: file.type,
                                }
                            )
                    );
                    field.input.onChange(renamedAcceptedFiles);
                }}
            >
                {({ getRootProps, getInputProps }) => (
                    <>
                        {/* {field.hint != false && (
                            <div className="govuk-hint">ss{t(field.hint)}</div>
                        )}
                        <div className="govuk-form-group"></div> */}
                        <section className="container">
                            <div {...getRootProps({ style })}>
                                {" "}
                                <input id={field.id} {...getInputProps()} />
                                <div>
                                    {t(
                                        "newappeal:new-appeal-fileupload-drop-label"
                                    )}
                                </div>
                                <em>
                                    (
                                    {t(
                                        "newappeal:new-appeal-fileupload-file-list-label"
                                    )}
                                    )
                                </em>
                            </div>
                            <aside>{thumbs}</aside>
                        </section>
                    </>
                )}
            </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-!-font-size-14 govuk-!-padding-left-5">
                                {file.name} ({bytesToSize(file.size)})
                            </span>
                        </div>
                    ))}
                </ul>
            )}
            {blobList.map((blob, i) => (
                <div
                    key={blob.name + "_" + i}
                    className="govuk-!-margin-bottom-5 fileThumb govuk-!-margin-top-5"
                >
                    <div className="">
                        <span
                            className="govuk-summary-list__actionLink watched_link govuk-!-margin-right-5 govuk-!-text-align-left"
                            onClick={() => {
                                deleteThisBlob(
                                    field.containerID,
                                    blob.name,
                                    blob.hasheddeletepath,
                                    blob.hashgetblobs,
                                    field.ticketnumber
                                );
                            }}
                            title="Remove this file"
                        >
                            &minus;
                        </span>
                    </div>
                    <img
                        src={getThumbnailIconByExtension(blob.name)}
                        alt={blob.name}
                        width="50"
                    />

                    <Link
                        key={i}
                        scroll={false}
                        href={
                            "/api/file/downloadblob?container=" +
                            field.containerID +
                            "&casefolderID=" +
                            field.ticketnumber +
                            "&blobname=" +
                            blob.name +
                            blob.hashedfilepath
                        }
                    >
                        <a className="govuk-body govuk-!-font-size-14 govuk-!-padding-left-5 govuk-link">
                            {blob.name} ({bytesToSize(blob.contentLength)})
                        </a>
                    </Link>
                </div>
            ))}{" "}
        </>
    );
};