# Cards

import Collapse from "@kunukn/react-collapse";
import { Responsive, WidthProvider } from "react-grid-layout";
import Card from "./Card";
import CardBody from "./CardBody";
import "react-grid-layout/css/styles.css";
import "react-resizable/css/styles.css";

<Card
    id="card-advance"
    title={"Portlet Title"}
    className={` ${
        advanceToolCollapse ? "card-collapsed" : ""
    } ${advanceToolMaximize ? "card-maximized" : ""}`}
    style={
        advanceToolMaximize ? { left: "70px", top: "59px" } : {}
    }
>
    <div className="card-controls">
        <ul>
            <li>
                <div
                    className={`dropdown ${
                        advanceToolDropDown ? "show" : ""
                    }`}
                >
                    <a
                        id="card-settings"
                        onClick={() => {
                            setAdvanceToolDropDown(
                                (prevState) => !prevState
                            );
                        }}
                        data-target="#"
                        href="#"
                        data-toggle="dropdown"
                        aria-haspopup="true"
                        role="button"
                        aria-expanded={`${
                            advanceToolDropDown ? "true" : "false"
                        }`}
                    >
                        <i className="card-icon card-icon-settings "></i>
                    </a>
                    <div
                        className={`dropdown-menu dropdown-menu-right ${
                            advanceToolDropDown ? "show" : ""
                        }`}
                        role="menu"
                        aria-labelledby="card-settings"
                        style={
                            advanceToolDropDown
                                ? {
                                        "will-change": "transform",
                                        position: "absolute",
                                        transform:
                                            "translate3d(-95px, 32px, 0px)",
                                        top: "0px",
                                        left: "0px",
                                        width: "100px",
                                    }
                                : {}
                        }
                        x-placement="bottom-end"
                    >
                        <a href="#" className="dropdown-item">
                            API
                        </a>
                        <a href="#" className="dropdown-item">
                            Preferences
                        </a>
                        <a href="#" className="dropdown-item">
                            About
                        </a>
                    </div>
                </div>
            </li>
            <li>
                <a
                    href="#"
                    className="card-collapse"
                    data-toggle="collapse"
                    onClick={() => {
                        setAdvanceToolCollapse(
                            (prevState) => !prevState
                        );
                    }}
                >
                    <i className="card-icon card-icon-collapse"></i>
                </a>
            </li>
            <li>
                <a
                    href="#"
                    className="card-refresh"
                    data-toggle="refresh"
                    onClick={() => {
                        setAdvanceToolRefresh(
                            (prevState) => !prevState
                        );
                        setTimeout(() => {
                            setAdvanceToolRefresh(
                                (prevState) => !prevState
                            );
                        }, 2000);
                    }}
                >
                    <i className="card-icon card-icon-refresh"></i>
                </a>
            </li>
            <li>
                <a
                    href="#"
                    className="card-maximize"
                    data-toggle="maximize"
                    onClick={() => {
                        setAdvanceToolMaximize(
                            (prevState) => !prevState
                        );
                    }}
                >
                    <i className="card-icon card-icon-maximize"></i>
                </a>
            </li>
            <li>
                <a
                    href="#"
                    className="card-close"
                    data-toggle="close"
                    onClick={() => {
                        setAdvanceToolClose((prevState) => !prevState);
                    }}
                >
                    <i className="card-icon card-icon-close"></i>
                </a>
            </li>
        </ul>
    </div>
    <Collapse
        transition={`height 290ms cubic-bezier(.4, 0, .2, 1)`}
        isOpen={!advanceToolCollapse}
    >
        <CardBody>
            <h3>
                <span className="semi-bold">Advance</span> Tools
            </h3>
            <p>
                We have crafted Pages Cards to suit any use case.
                Add a maximize button{" "}
                <i className="pg-fullscreen"></i> into your Cards
                controls bar to make the Cards go full-screen. This
                will come handy if you want to show lot of content
                inside a Cards and want to give the content some
                room to breath
            </p>
            <br />
            <div>
                <div className="profile-img-wrapper m-t-5 inline">
                    <img
                        width="35"
                        height="35"
                        data-src-retina="assets/img/profiles/avatar_small2x.jpg"
                        data-src="../assets/img/profiles/avatar_small.jpg"
                        alt=""
                        src="../assets/img/profiles/avatar_small.jpg"
                    />
                    <div className="chat-status available"></div>
                </div>
                <div className="inline m-l-10">
                    <p className="small hint-text m-t-5">
                        VIA senior product manage
                        <br />
                        for UI/UX at REVOX
                    </p>
                </div>
            </div>
        </CardBody>
    </Collapse>
    {advanceToolRefresh ? (
        <div
            className="card-progress"
            style={{
                "background-color": "rgba(255, 255, 255, 0.8)",
                display: "block",
            }}
        >
            <div className="progress-circle-indeterminate progress-circle-master"></div>
        </div>
    ) : null}
</Card>