import React from "react";
import ContentWrapper from '@/components/Layout/ContentWrapper';
import { Container, Row, Col, Card, CardBody, CardFooter, CardHeader, Input, Button } from 'reactstrap';
import FormValidator from "@/components/Forms/Validator.js";
import { ptPublic } from "@/actions/PT";
import AsyncSelect from "react-select/async";
import { loginToPt } from "../../../actions/auth";
import { connect } from "react-redux";
import { ToastContainer, toast } from "react-toastify";
import { getCsrf } from "../../../actions/security";
import Swal from "sweetalert2";




const loadOptions = (inputValue, callback) => {
    setTimeout(async () => {
        const pt = await ptPublic({ search: inputValue });
        const data = pt.data.map((e) => ({
            value: e.id,
            label: e.nama,
            className: "State-ACT",
        }));
        callback(data);
    }, 1000);
};
class Verifikasi extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            formLogin: {
                password: ""
            },
            loading: false,
            inputValue: "",
            pt_id: ""

        };
    }

    validateOnChange = (event) => {
        const input = event.target;
        const form = input.form;
        const value = input.type === "checkbox" ? input.checked : input.value;

        const result = FormValidator.validate(input);
        this.setState({
            [form.name]: {
                ...this.state[form.name],
                [input.name]: value,
                errors: {
                    ...this.state[form.name].errors,
                    [input.name]: result,
                },
            },
        });
    };
    hasError = (formName, inputName, method) => {
        return (
            this.state[formName] &&
            this.state[formName].errors &&
            this.state[formName].errors[inputName] &&
            this.state[formName].errors[inputName][method]
        );
    };




    handleChangeSelectPerguruanTinggi = (selected_PT) => {
        this.setState({ pt_id: selected_PT.value });
    };
    onSubmit = async () => {
        if (this.props.user.role.id === 2024) {
            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;
            this.setState({ loading: true });
            const { password } = this.state.formLogin;
            const { pt_id } = this.state
            const auth = await toast.promise(loginToPt(pt_id, password, _csrf), {
                pending: "Loading",
                success: "Success",
                error: "Akun tidak ada",
            });
            // const auth = await loginToPt(pt_id, password);
            this.props.setToken(auth.data.token);
            this.props.setUser(auth.data.user);
            if (auth.data.user.role.id === 2022) {
                location.href = "/pt/pemantauan"
                return;
            } else if ([2020, 2021, 2023].includes(auth.data.user.role.id)) {
                location.href = "/pt/pemantauan"
                return;
            }
            this.setState({ loading: false });
        }
    }


    render() {
        return (
            <ContentWrapper>
                <div className="content-heading">
                    <span className="font-color-white">
                        Verifikasi
                    </span>
                </div>
                <Container className="container-sm pt-5" >
                    <Card
                        style={{ margin: "20px", borderRadius: "15px" }}
                    >
                        <CardHeader className="text-center">
                            <div className="card-title font-weight-bold mt-4  font-color-black"
                                style={{ fontSize: "20px" }}
                            >Login sebagai Perguruan Tinggi</div>
                        </CardHeader>
                        <CardBody>
                            <form onSubmit={this.onSubmit} method="post" name="formLogin">
                                <div className="form-group">
                                    <label className="col-form-label font-color-black mb-0 font-weight-bold">Password akun PDDIKTI</label>
                                    <Input
                                        style={{ borderRadius: "7px" }}
                                        type="password"
                                        id="id-password"
                                        name="password"
                                        invalid={this.hasError("formLogin", "password", "required")}
                                        onChange={this.validateOnChange}
                                        data-validate='["required"]'
                                        value={this.state.formLogin.password}

                                    />
                                    <span className="invalid-feedback">Wajib diisi</span>
                                </div>
                                <div className="form-group">
                                    <label className="col-form-label font-color-black mb-0 font-weight-bold">Perguruan Tinggi</label>
                                    <AsyncSelect
                                        style={{ borderRadius: "7px" }}
                                        cacheOptions
                                        loadOptions={loadOptions}
                                        defaultOptions
                                        onChange={(e) => {
                                            this.handleChangeSelectPerguruanTinggi(e);
                                        }}
                                    // onInputChange={this.handleInputChange}
                                    />
                                    <span className="invalid-feedback">Field is required</span>
                                </div>
                                <Button color className="btn-login float-right mt-3"
                                    style={{ borderRadius: "7px" }}
                                    onClick={this.onSubmit}
                                >
                                    <span className="font-color-white">
                                        {this.state.loading ? (
                                            <div class="d-flex justify-content-center">
                                                <div
                                                    class="spinner-border spinner-border-sm"
                                                    role="status"
                                                ></div>
                                            </div>
                                        ) : (
                                            "Login"
                                        )}
                                    </span>
                                </Button>
                            </form>
                        </CardBody>
                    </Card>
                </Container>
            </ContentWrapper>)
    }
}





const mapStateToProps = (state) => ({ user: state.user });
const mapDispatchToProps = (dispatch) => ({
    setUser: (payload) => dispatch({ type: "SET_USER", payload }),
    setToken: (payload) => dispatch({ type: "SET_TOKEN", payload }),
    setPT: (payload) => dispatch({ type: "SET_PT", payload }),
});
export default connect(mapStateToProps, mapDispatchToProps)(Verifikasi);