import DataService from "@common-services/DataService";
import React, { useEffect, useState } from "react";
import ContentWrapper from "../utils/ContentWrapper";
import { Card, CardBody, CardHeader, Col, Row } from "reactstrap";
import { faFilm, faImage } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { useHistory } from "react-router-dom/cjs/react-router-dom.min";

const MediaGallery = () => { //discontinued in dev-testing phase, as the users are not familiar with this type of flow
    const history = useHistory();
    const [mediaTypes, setMediaTypes] = useState([]);

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

    const fetchMediaTypes = async () => {
        try {
            const res = await DataService.get("/api/v1/dms/media/types");
            // console.log({"res from get media types": res});
            if (res.success) {
                const mediaTypes = res.data.map(typeData => ({
                    ...typeData,
                    label: typeData.name.split("")[0].toUpperCase() + typeData.name.slice(1), //first letter capital
                    pluralName: typeData.name.split("")[0].toUpperCase() + typeData.name.slice(1) + "s",
                    faIcon: typeData.name === "video" ? faFilm : faImage
                }));
                setMediaTypes(mediaTypes);
            }
        } catch (error) {
            console.error("Error while fetching Media Types", error);
        }
    };

    const onClickMediaCard = type => {
        history.push(`./${type.name}s`, { mediaType: { ...type } });
    };

    return (
        <ContentWrapper containerClass={"media-gallery-wrapper"}>
            <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">{"Media Types"}</div>
                        </CardHeader>
                        <CardBody className="media-types-list">
                            {Object.keys(mediaTypes).length > 0 &&
                                mediaTypes.map(type => (
                                    <Card
                                        key={type.name}
                                        onClick={() => onClickMediaCard(type)}
                                        title={`Select ${type.pluralName}`}
                                    >
                                        <div className="media-type-label">
                                            <FontAwesomeIcon icon={type.faIcon} />
                                            {type.label}
                                        </div>
                                    </Card>
                                ))}
                        </CardBody>
                    </Card>
                </Col>
            </Row>
        </ContentWrapper>
    );
};

export default MediaGallery;