import React, { useEffect, useRef, useState } from "react";
import ContentWrapper from "../utils/ContentWrapper";
import ToastUtil from "@common-utils/ToastUtil";
import DataService from "@common-services/DataService";
import { connect } from "react-redux";
import { FormField } from "@amxchange/grid-view-web-client";
import { APPLICATIONS_API_BASE_ROUTE, fetchApplications } from "./constants";
import {
    Button,
    Card,
    CardBody,
    CardHeader,
    CardText,
    CardTitle,
    Col,
    ListGroup,
    ListGroupItem,
    Row
} from "reactstrap";
import ModalAlt from "../utils/ModalAlt";

const Applications = ({ userDetails }) => {
    //on creation everything of the app is to be set to zero?
    const [applications, setApplications] = useState([]);
    const createAppModalRef = useRef(null);
    const [isLoading, setIsLoading] = useState(false);

    const createApplication = async application => {
        try {
            setIsLoading(true);
            const reqBody = getReqBody(application);
            if (!reqBody) return ToastUtil.error("Please enter all the required Fields!!");
            const res = await DataService.post(APPLICATIONS_API_BASE_ROUTE, {...reqBody});
            // console.log({ "Res from creating Applications": res });
            if (res.status?.code === 200) {
                ToastUtil.success(`Successfully Created the app ${application.name}`);
                createAppModalRef.current.hide();
                init();
            }
        } catch (error) {
            console.error(`Error while Creating an Application with name ${application.name} `, error);
        } finally {
            setIsLoading(false);
        }
    };

    const getReqBody = application => {
        if (!application.name || !application.description) return null;
        return {
            createdBy: userDetails.email || userDetails.employeeName,
            appName: application.name,
            appDescription: application.description
        };
    };

    const init = async () => {
        const applications = await fetchApplications();
        setApplications(applications);
    };

    const onClickCreateApp = () => {
        createAppModalRef.current.setData({
            employeeEmail: userDetails.email,
            createApplication: createApplication
        });
        createAppModalRef.current.show();
    };

    useEffect(() => {
        init();
    }, []);

    return (
        <ContentWrapper>
            <div className={isLoading ? "loader-inline" : ""}>
                <Row>
                    <Col className="mb-5 mb-xl-0" xl="12">
                        <Card className="shadow">
                            <CardHeader className="bg-transparent d-flex align-items-center justify-content-between">
                                <div className="display-4">{"Existing Applications"}</div>
                                <div>
                                    <Button
                                        className="text-white"
                                        style={{ backgroundColor: "var(--amx-primary-color)" }}
                                        onClick={() => onClickCreateApp()}
                                    >
                                        {"+ Add Application"}
                                    </Button>
                                </div>
                            </CardHeader>
                            <CardBody className="app-grid">
                                {applications.length === 0 ? (
                                    <Col>
                                        <h4>No applications available</h4>
                                    </Col>
                                ) : (
                                    applications.map(app => (
                                        <Col md="4" key={app._id}>
                                            <Card className="mb-3 app-card">
                                                <CardBody>
                                                    <CardTitle tag="h5">{app.name}</CardTitle>
                                                    <CardText>{app.description}</CardText>
                                                    <ListGroup flush>
                                                        <ListGroupItem>
                                                            <strong>Version No:</strong>{" "}
                                                            {app.version.versionNumber || "N/A"}
                                                        </ListGroupItem>
                                                        <ListGroupItem>
                                                            <strong>Version Code:</strong>{" "}
                                                            {app.version.versionCode || "N/A"}
                                                        </ListGroupItem>
                                                        <ListGroupItem>
                                                            {getForceUpdateTypeBasedOnInput(app)}
                                                        </ListGroupItem>
                                                        <ListGroupItem>
                                                            <strong>Updated By:</strong>{" "}
                                                            {app.version.updatedBy || "N/A"}
                                                        </ListGroupItem>
                                                        <ListGroupItem>
                                                            <strong>Last Updated:</strong>{" "}
                                                            {new Date(app.version.timestamp.stamp).toLocaleString()}
                                                        </ListGroupItem>
                                                    </ListGroup>
                                                </CardBody>
                                            </Card>
                                        </Col>
                                    ))
                                )}
                            </CardBody>
                        </Card>
                    </Col>
                </Row>
            </div>
            <ModalAlt ref={createAppModalRef} modalType="lg" title={"Create Application"}>
                <CreateAppForm />
            </ModalAlt>
        </ContentWrapper>
    );
};

const CreateAppForm = ({ data, close }) => {
    const { employeeEmail, createApplication } = data;
    const [application, setApplication] = useState({ name: "", description: "" });

    const onClickCreateApp = async () => {
        createApplication(application);
    };
    return (
        <>
            <div className="d-flex justify-content-between mb-4 mx-4">
                <FormField
                    label={"Name"}
                    type={"text"}
                    containerClass={"lg"}
                    controlled={true}
                    value={application.name}
                    onChange={newVal => setApplication(prev => ({ ...prev, name: newVal }))}
                />
                <FormField
                    label={"Description"}
                    type={"text"}
                    containerClass={"lg"}
                    controlled={true}
                    value={application.description}
                    onChange={newVal => setApplication(prev => ({ ...prev, description: newVal }))}
                />
                <FormField
                    label={"Employee Name"}
                    type={"display"}
                    containerClass={"lg"}
                    defaultValue={employeeEmail}
                />
            </div>
            <div className="modal-footer d-flex justify-content-center">
                <Button color="light" onClick={close}>
                    {"Cancel"}
                </Button>
                <Button color="success" onClick={onClickCreateApp}>
                    {"Create App"}
                </Button>
            </div>
        </>
    );
};

const getForceUpdateTypeBasedOnInput = app => {
    if (app.version.isSuperUpdate)
        return (
            <>
                <strong>Is Super Update:</strong> True
            </>
        );
    else if (app.version.isStagedUpdate)
        return (
            <>
                <strong>Is Staged Update:</strong> True
            </>
        );
    else
        return (
            <>
                <strong>Priority:</strong> {app.version.priority}
            </>
        );
};

const mapStateToProps = state => ({
    userDetails: state.Auth?.user
});

export default connect(mapStateToProps)(Applications);