import React, { Component } from "react";
import { Row, Col, Input, FormGroup, Label, Progress, Button } from "reactstrap";
import Select from "react-select";
import Swal from "sweetalert2";
import * as Yup from "yup";
import { connect } from "react-redux";
import { Formik, Form, Field, ErrorMessage } from "formik";
import { updateLaporan } from "../../actions/pelaporan"
import { getCsrf } from "../../actions/security";
import { ToastContainer, toast } from "react-toastify";
import Router from "next/router";
import { createLog } from "../../actions/log";



const checkIfFilesAreTooBig = (files) => {
    let valid = true;
    if (files) {
        files.map((file) => {
            if (file.size > 15 * 1024 * 1024) {
                valid = false;
            }
        });
    }
    return valid;
};
let Dropzone = null;
class DropzoneWrapper extends Component {
    state = {
        isClient: false,
    };
    componentDidMount = () => {
        Dropzone = require("react-dropzone").default;
        this.setState({ isClient: true });
    };
    render() {
        return Dropzone ? <Dropzone {...this.props}>{this.props.children}</Dropzone> : null;
    }
}
const ditutupSchema = Yup.object().shape({
    keterangan: Yup.string().required("Harus diisi"),
    dokumen: Yup.array().test("filesize", "Maksimal ukuran dokumen 15mb", checkIfFilesAreTooBig),
});
const status = [
    { value: "Sanksi", label: "Sanksi", className: "State-ACT" },
    { value: "Ditutup", label: "Ditutup", className: "State-ACT" },
];

export class Redudansi extends Component {
    constructor(props) {
        super(props);
        const tmt_awal = new Date();
        this.state = {
            files: [],
            keterangan: "",
            selectedOption: null,

        };
    }
    async componentDidMount() {

        this.defaultStatus();

    }
    defaultStatus = async () => {
        return this.setState({ selectedOption: status[0] });
    };

    handleChangeSelect = (selectedOption) => this.setState({ selectedOption }, this.setDataStatusLaporan);
    // handleChangeSelect = (selectedOption) => {
    //     this.state.selectedOption = selectedOption
    //     this.setDataStatusLaporan()
    // }
    getStatus = () => (status);

    onDrop = (selectedFile) => {
        this.setState({
            selectedFile: selectedFile.map((file) =>
                Object.assign(file, {
                    preview: URL.createObjectURL(file),
                })
            ),
            stat: "Added " + selectedFile.length + " file(s)",
        });
        const selectFile = this.state.selectedFile
        this.setState(prevState => ({
            files: [...prevState.files, ...selectFile]
        }))
    };
    logDitutup = async () => {
        const getToken = await getCsrf();
        const _csrf = getToken.token;
        const { token } = this.props;
     
        await createLog(token, { aktivitas: `Berhasil menutup laporan, id: ${this.props.id}`, _csrf: _csrf, menu: "Sanksi" });
    }
    handleTutupLaporan = async (data, value) => {
        if (this.props.role === 2071) {
            Swal.fire({
                icon: 'error',
                title: 'Oops...',
                html: 'Maaf anda tidak memiliki akses untuk menyelesaikan<p> proses ini.</p>',
                confirmButtonColor: "#3e3a8e",
                confirmButtonText: 'Oke'
            })
        } else {
            const getToken = await getCsrf();
            const _csrf = getToken.token;
            const { token } = this.props;
            const formdata = new FormData();
            formdata.append("keterangan", data.keterangan);
            this.state.files.forEach((e) => {
                formdata.append("dokumen", e);
            });
            formdata.append("aktif", "false");

            await toast.promise(updateLaporan(token, this.props.id, formdata, _csrf + `&redudansi=true`), {
                pending: "Loading",
                success: {
                    render: "success",
                    autoClose: 1000
                },
                error: "Error",
            });
            await this.logDitutup()
            await Router.push({
                pathname: "/app/sanksi",
            });
        }

    };
    setDataStatusLaporan = () => {
        this.props.setDataStatusLaporan(this.state)
    }

    render() {
        const { files, selectedOption } = this.state;
        const removeFile = file => () => {
            const newFiles = [...files]
            newFiles.splice(newFiles.indexOf(file), 1)
            this.setState({
                files: newFiles,
            });
        }
        const thumbs = files.map((file, index) => (
            <p>
                <em className="far fa-file" />&nbsp;&nbsp;{file.name}
                <button className="bg-transparent button-transparent border-0 fas fa-trash text-danger float-right" onClick={removeFile(file)} />
            </p>
        ));
        return (
            <>
                <Formik
                    enableReinitialize={true}
                    initialValues={{
                        status: this.getStatus()[0],
                        keterangan: "",
                        dokumen: [],
                    }}
                    validationSchema={selectedOption?.value === this.getStatus()[1].value ? ditutupSchema : null}
                    onSubmit={this.handleTutupLaporan}
                >
                    {({ isSubmitting }) => (
                        <Form>
                            <FormGroup row>
                                <label className="col-md-2 col-form-label font-weight-bold font-color-black">Status Laporan</label>
                                <div className="col-md-10">
                                    <Field name="status">
                                        {({ field, form }) => (
                                            <Select
                                                value={field.value}
                                                onChange={(e) => {
                                                    form.setFieldValue(field.name, e);
                                                    this.handleChangeSelect(e);
                                                }}
                                                options={this.getStatus()}
                                                required
                                            />
                                        )}
                                    </Field>
                                    <ErrorMessage name="status" component="div" className="form-text text-danger" />
                                </div>

                            </FormGroup>
                            {selectedOption?.value === this.getStatus()[0].value ? (
                                ""
                            ) : (
                                <div>
                                    <FormGroup row>
                                        <label className="col-md-2 col-form-label">Keterangan<span className=" text-danger">*</span></label>
                                        <div className="col-md-10">
                                            <Field name="keterangan">{({ field, form }) => <Input type="text" placeholder="Keterangan" {...field} />}</Field>
                                            <ErrorMessage name="keterangan" component="div" className="form-text text-danger" />
                                        </div>

                                    </FormGroup>
                                    <FormGroup row>
                                        <label className="col-md-2 col-form-label">Upload File Pendukung<span className="text-danger">*</span></label>
                                        <div className="col-md-10">
                                            <Field name="dokumen">
                                                {({ field, form, meta }) => (
                                                    <DropzoneWrapper
                                                        className=""
                                                        onDrop={(e) => {
                                                            this.onDrop(e);
                                                            form.setFieldValue(field.name, e);
                                                        }}
                                                    >
                                                        {({ getRootProps, getInputProps, isDragActive }) => {
                                                            return (
                                                                <div {...getRootProps()} className={"dropzone card" + (isDragActive ? "dropzone-drag-active" : "")}>
                                                                    <input name="dokumen" {...getInputProps()} />
                                                                    <div className="dropzone-style-1">
                                                                        <div className="center-ver-hor dropzone-previews flex">{this.state.files.length > 0 ?
                                                                            <div className="text-center fa-2x icon-cloud-upload mr-2 ">
                                                                                <h5 className="text-center dz-default dz-message">Klik untuk tambah file</h5>
                                                                            </div> :
                                                                            <div className="text-center fa-2x icon-cloud-upload mr-2 ">
                                                                                <h5 className="text-center dz-default dz-message">Klik untuk upload dokumen</h5>
                                                                            </div>
                                                                        }
                                                                        </div>
                                                                    </div>
                                                                    <div className="d-flex align-items-center">
                                                                        <small className="ml-auto">
                                                                            <button
                                                                                type="button"
                                                                                className="btn btn-link"
                                                                                onClick={(e) => {
                                                                                    this.clearFiles(e);
                                                                                    form.setFieldValue(field.name, []);
                                                                                }}
                                                                            >
                                                                                Reset dokumen
                                                                            </button>
                                                                        </small>
                                                                    </div>
                                                                </div>
                                                            );
                                                        }}
                                                    </DropzoneWrapper>
                                                )}
                                            </Field>
                                            {thumbs}
                                            <ErrorMessage name="dokumen" component="div" className="form-text text-danger" />
                                            <p className="mrgn-top-5 font-color-black">
                                                Ukuran setiap dokumen maksimal 15mb
                                            </p>
                                        </div>
                                        <FormGroup>
                                            <div className="col-xl-10">
                                                <Button color className="btn-login width-133 mt-4" type="submit" disabled={isSubmitting}>
                                                    <span className="font-color-white">
                                                        Tutup Laporan
                                                    </span>
                                                </Button>
                                            </div>
                                        </FormGroup>
                                    </FormGroup>
                                </div>


                            )}
                        </Form>
                    )}
                </Formik>
            </>
        );
    }
}

// const mapStateToProps = (state) => ({ user: state.user, token: state.token });
// export default connect(mapStateToProps)(Redudansi);
export default Redudansi