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 Router from "next/router";





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 BypassII extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            formLogin: {
                password: ""
            },
            loading: false,
            inputValue: "",
            pt_id: ""

        };
    }



    handleChangeSelectPerguruanTinggi = (selected_PT) => {
        this.setState({ pt_id: selected_PT.value });
    };
    handleClick = (e, PT_ID) => {
        e.preventDefault();
        Router.push({
            pathname: "/app/bypassII/detail",
            query: { ptId: PT_ID },
        });

    }


    render() {
        return (
            <ContentWrapper>
                <div className="content-heading">
                    <span className="font-color-white">
                        Bypass II
                    </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" }}
                            >Pilih Perguruan tinggi</div>
                        </CardHeader>
                        <CardBody>
                            <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={(e) => this.handleClick(e, this.state.pt_id)}
                            >
                                <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>
                                    ) : (
                                        "Pilih"
                                    )}
                                </span>
                            </Button>
                        </CardBody>
                    </Card>
                </Container>
            </ContentWrapper>)
    }
}





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