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


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: "",
                // pt_id: ""
            },

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



    // handleInputChange = (newValue) => {
    //     const inputValue = newValue.replace();
    //     this.setState({ inputValue });
    //     return inputValue;
    //   };
    handleChangeSelectPerguruanTinggi = (selected_PT) => {
        this.setState({ pt_id: selected_PT.value });
    };
    onSubmit = async (e) => {
        console.log("di submitt")
    }


    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">Login</span>
                                </Button>
                            </form>
                        </CardBody>
                    </Card>
                </Container>
            </ContentWrapper>)
    }
}






export default Verifikasi