import React from "react";
import { Container, Row, Col, Card, Button } from "react-bootstrap";
import CustomIcon from "../components/CustomIcon/CustomIcon";
import { handleAlert } from "../util/util";
import { RiFileCopyLine } from "react-icons/ri";

//Icons data...
import { appIcons } from "../util/app-icons";

function ReactIconCard({ item }) {
  const copyToClipboard = async () => {
    if (navigator.clipboard) {
      try {
        await navigator.clipboard.writeText(`${item.tag}`);
        console.log("Successfully copied - ", item.tag);
        handleAlert(`Copied to clipboard - '${item.tag}'`, "success");
      } catch (error) {
        console.log("Failed to copy to clipboard...", error);
        handleAlert("Failed to copy", "error");
      }
    }
  };

  return (
    <Card
    // onClick={copyToClipboard}
    >
      <Card.Body className="text-center position-relative p-2">
        <div className="d-flex justify-content-between">
          <div className="me-0 font-15 fw_sb custom_tag tag_secondary_light">
            {item.category}
          </div>
          <Button
            type="button"
            className="btn btn-theme btn-yellow btn-icon pe-none"
          >
            {item.familyCode}
          </Button>
        </div>
        <div className="lh-1" style={{ fontSize: "40px" }}>
          <CustomIcon
            title={item.title}
            tag={item.tag}
            className={`custom-icon icon-${item.category}`}
          />
        </div>
        <div className="mt-2 me-0 font-15 fw_sb">{item.title}</div>
        <div className="mt-2 mb-2">{`( ${item.familyName} )`}</div>
      </Card.Body>
      <Card.Footer className="p-0 border-top-0">
        <Button
          type="button"
          className="btn btn-theme btn-primary w-100 border-0 position-relative"
          title="Click to copy"
          onClick={copyToClipboard}
        >
          Tag: <span className="fw_sb">{item.tag}</span>
          <RiFileCopyLine
            className="position-absolute font-20"
            style={{ right: "12px" }}
          />
        </Button>
      </Card.Footer>
    </Card>
  );
}

function AppIcons() {
  return (
    <Container fluid className="py-5">
      <h4>All React Icons used in App:</h4>
      <hr />

      {appIcons.filter((item) => item.category === "general").length > 0 && (
        <>
          <h6>General:</h6>
          <Row className="row-cols-2 row-cols-md-3 row-cols-lg-4 row-cols-xl-6 g-3 mb-4">
            {appIcons
              .filter((item) => item.category === "general")
              .map((item) => (
                <Col key={item.title}>
                  <ReactIconCard item={item} />
                </Col>
              ))}
          </Row>
        </>
      )}

      {appIcons.filter((item) => item.category === "file").length > 0 && (
        <>
          <h6>Files:</h6>
          <Row className="row-cols-2 row-cols-md-3 row-cols-lg-4 row-cols-xl-6 g-3 mb-4">
            {appIcons
              .filter((item) => item.category === "file")
              .map((item) => (
                <Col key={item.title}>
                  <ReactIconCard item={item} />
                </Col>
              ))}
          </Row>
        </>
      )}

      {appIcons.filter((item) => item.category === "arrows").length > 0 && (
        <>
          <h6>Arrows:</h6>
          <Row className="row-cols-2 row-cols-md-3 row-cols-lg-4 row-cols-xl-6 g-3 mb-4">
            {appIcons
              .filter((item) => item.category === "arrows")
              .map((item) => (
                <Col key={item.title}>
                  <ReactIconCard item={item} />
                </Col>
              ))}
          </Row>
        </>
      )}

      {appIcons.filter((item) => item.category === "sort").length > 0 && (
        <>
          <h6>Sorting / Filter:</h6>
          <Row className="row-cols-2 row-cols-md-3 row-cols-lg-4 row-cols-xl-6 g-3 mb-4">
            {appIcons
              .filter((item) => item.category === "sort")
              .map((item) => (
                <Col key={item.title}>
                  <ReactIconCard item={item} />
                </Col>
              ))}
          </Row>
        </>
      )}

      {appIcons.filter((item) => item.category === "exp-bank").length > 0 && (
        <>
          <h6>Experience Bank:</h6>
          <Row className="row-cols-2 row-cols-md-3 row-cols-lg-4 row-cols-xl-6 g-3 mb-4">
            {appIcons
              .filter((item) => item.category === "exp-bank")
              .map((item) => (
                <Col key={item.title}>
                  <ReactIconCard item={item} />
                </Col>
              ))}
          </Row>
        </>
      )}

      {appIcons.filter((item) => item.category === "dashboard").length > 0 && (
        <>
          <h6>Dashboard:</h6>
          <Row className="row-cols-2 row-cols-md-3 row-cols-lg-4 row-cols-xl-6 g-3 mb-4">
            {appIcons
              .filter((item) => item.category === "dashboard")
              .map((item) => (
                <Col key={item.title}>
                  <ReactIconCard item={item} />
                </Col>
              ))}
          </Row>
        </>
      )}

      {appIcons.filter((item) => item.category === "associate").length > 0 && (
        <>
          <h6>Associate:</h6>
          <Row className="row-cols-2 row-cols-md-3 row-cols-lg-4 row-cols-xl-6 g-3 mb-4">
            {appIcons
              .filter((item) => item.category === "associate")
              .map((item) => (
                <Col key={item.title}>
                  <ReactIconCard item={item} />
                </Col>
              ))}
          </Row>
        </>
      )}

      {appIcons.filter((item) => item.category === "share").length > 0 && (
        <>
          <h6>Share:</h6>
          <Row className="row-cols-2 row-cols-md-3 row-cols-lg-4 row-cols-xl-6 g-3 mb-4">
            {appIcons
              .filter((item) => item.category === "share")
              .map((item) => (
                <Col key={item.title}>
                  <ReactIconCard item={item} />
                </Col>
              ))}
          </Row>
        </>
      )}

      {appIcons.filter((item) => item.category === "network").length > 0 && (
        <>
          <h6>Network:</h6>
          <Row className="row-cols-2 row-cols-md-3 row-cols-lg-4 row-cols-xl-6 g-3 mb-4">
            {appIcons
              .filter((item) => item.category === "network")
              .map((item) => (
                <Col key={item.title}>
                  <ReactIconCard item={item} />
                </Col>
              ))}
          </Row>
        </>
      )}

      {appIcons.filter((item) => item.category === "discover").length > 0 && (
        <>
          <h6>Discover:</h6>
          <Row className="row-cols-2 row-cols-md-3 row-cols-lg-4 row-cols-xl-6 g-3 mb-4">
            {appIcons
              .filter((item) => item.category === "discover")
              .map((item) => (
                <Col key={item.title}>
                  <ReactIconCard item={item} />
                </Col>
              ))}
          </Row>
        </>
      )}

      {appIcons.filter((item) => item.category === "consult").length > 0 && (
        <>
          <h6>Consult / Consulting session:</h6>
          <Row className="row-cols-2 row-cols-md-3 row-cols-lg-4 row-cols-xl-6 g-3 mb-4">
            {appIcons
              .filter((item) => item.category === "consult")
              .map((item) => (
                <Col key={item.title}>
                  <ReactIconCard item={item} />
                </Col>
              ))}
          </Row>
        </>
      )}

      {appIcons.filter((item) => item.category === "message").length > 0 && (
        <>
          <h6>Message:</h6>
          <Row className="row-cols-2 row-cols-md-3 row-cols-lg-4 row-cols-xl-6 g-3 mb-4">
            {appIcons
              .filter((item) => item.category === "message")
              .map((item) => (
                <Col key={item.title}>
                  <ReactIconCard item={item} />
                </Col>
              ))}
          </Row>
        </>
      )}

      {appIcons.filter((item) => item.category === "achievements").length >
        0 && (
        <>
          <h6>Achievements:</h6>
          <Row className="row-cols-2 row-cols-md-3 row-cols-lg-4 row-cols-xl-6 g-3 mb-4">
            {appIcons
              .filter((item) => item.category === "achievements")
              .map((item) => (
                <Col key={item.title}>
                  <ReactIconCard item={item} />
                </Col>
              ))}
          </Row>
        </>
      )}

      {appIcons.filter((item) => item.category === "star").length > 0 && (
        <>
          <h6>Star:</h6>
          <Row className="row-cols-2 row-cols-md-3 row-cols-lg-4 row-cols-xl-6 g-3 mb-4">
            {appIcons
              .filter((item) => item.category === "star")
              .map((item) => (
                <Col key={item.title}>
                  <ReactIconCard item={item} />
                </Col>
              ))}
          </Row>
        </>
      )}

      {appIcons.filter((item) => item.category === "delete").length > 0 && (
        <>
          <h6>Delete / Trash:</h6>
          <Row className="row-cols-2 row-cols-md-3 row-cols-lg-4 row-cols-xl-6 g-3 mb-4">
            {appIcons
              .filter((item) => item.category === "delete")
              .map((item) => (
                <Col key={item.title}>
                  <ReactIconCard item={item} />
                </Col>
              ))}
          </Row>
        </>
      )}

      {appIcons.filter((item) => item.category === "analyze").length > 0 && (
        <>
          <h6>Analyze:</h6>
          <Row className="row-cols-2 row-cols-md-3 row-cols-lg-4 row-cols-xl-6 g-3 mb-4">
            {appIcons
              .filter((item) => item.category === "analyze")
              .map((item) => (
                <Col key={item.title}>
                  <ReactIconCard item={item} />
                </Col>
              ))}
          </Row>
        </>
      )}

      {appIcons.filter((item) => item.category === "edit").length > 0 && (
        <>
          <h6>Edit:</h6>
          <Row className="row-cols-2 row-cols-md-3 row-cols-lg-4 row-cols-xl-6 g-3 mb-4">
            {appIcons
              .filter((item) => item.category === "edit")
              .map((item) => (
                <Col key={item.title}>
                  <ReactIconCard item={item} />
                </Col>
              ))}
          </Row>
        </>
      )}

      {appIcons.filter((item) => item.category === "dictionary").length > 0 && (
        <>
          <h6>Dictionary:</h6>
          <Row className="row-cols-2 row-cols-md-3 row-cols-lg-4 row-cols-xl-6 g-3 mb-4">
            {appIcons
              .filter((item) => item.category === "dictionary")
              .map((item) => (
                <Col key={item.title}>
                  <ReactIconCard item={item} />
                </Col>
              ))}
          </Row>
        </>
      )}

      {appIcons.filter((item) => item.category === "reload").length > 0 && (
        <>
          <h6>Reload:</h6>
          <Row className="row-cols-2 row-cols-md-3 row-cols-lg-4 row-cols-xl-6 g-3 mb-4">
            {appIcons
              .filter((item) => item.category === "reload")
              .map((item) => (
                <Col key={item.title}>
                  <ReactIconCard item={item} />
                </Col>
              ))}
          </Row>
        </>
      )}

      {appIcons.filter((item) => item.category === "shop").length > 0 && (
        <>
          <h6>Shop:</h6>
          <Row className="row-cols-2 row-cols-md-3 row-cols-lg-4 row-cols-xl-6 g-3 mb-4">
            {appIcons
              .filter((item) => item.category === "shop")
              .map((item) => (
                <Col key={item.title}>
                  <ReactIconCard item={item} />
                </Col>
              ))}
          </Row>
        </>
      )}

      {appIcons.filter((item) => item.category === "connect").length > 0 && (
        <>
          <h6>Connect:</h6>
          <Row className="row-cols-2 row-cols-md-3 row-cols-lg-4 row-cols-xl-6 g-3 mb-4">
            {appIcons
              .filter((item) => item.category === "connect")
              .map((item) => (
                <Col key={item.title}>
                  <ReactIconCard item={item} />
                </Col>
              ))}
          </Row>
        </>
      )}

      {appIcons.filter((item) => item.category === "invitation").length > 0 && (
        <>
          <h6>Invitation:</h6>
          <Row className="row-cols-2 row-cols-md-3 row-cols-lg-4 row-cols-xl-6 g-3 mb-4">
            {appIcons
              .filter((item) => item.category === "invitation")
              .map((item) => (
                <Col key={item.title}>
                  <ReactIconCard item={item} />
                </Col>
              ))}
          </Row>
        </>
      )}

      {appIcons.filter((item) => item.category === "details").length > 0 && (
        <>
          <h6>Details:</h6>
          <Row className="row-cols-2 row-cols-md-3 row-cols-lg-4 row-cols-xl-6 g-3 mb-4">
            {appIcons
              .filter((item) => item.category === "details")
              .map((item) => (
                <Col key={item.title}>
                  <ReactIconCard item={item} />
                </Col>
              ))}
          </Row>
        </>
      )}

      {appIcons.filter((item) => item.category === "experience").length > 0 && (
        <>
          <h6>Experience:</h6>
          <Row className="row-cols-2 row-cols-md-3 row-cols-lg-4 row-cols-xl-6 g-3 mb-4">
            {appIcons
              .filter((item) => item.category === "experience")
              .map((item) => (
                <Col key={item.title}>
                  <ReactIconCard item={item} />
                </Col>
              ))}
          </Row>
        </>
      )}

      {appIcons.filter((item) => item.category === "dreams").length > 0 && (
        <>
          <h6>Dreams:</h6>
          <Row className="row-cols-2 row-cols-md-3 row-cols-lg-4 row-cols-xl-6 g-3 mb-4">
            {appIcons
              .filter((item) => item.category === "dreams")
              .map((item) => (
                <Col key={item.title}>
                  <ReactIconCard item={item} />
                </Col>
              ))}
          </Row>
        </>
      )}

      {appIcons.filter((item) => item.category === "events").length > 0 && (
        <>
          <h6>Events:</h6>
          <Row className="row-cols-2 row-cols-md-3 row-cols-lg-4 row-cols-xl-6 g-3 mb-4">
            {appIcons
              .filter((item) => item.category === "events")
              .map((item) => (
                <Col key={item.title}>
                  <ReactIconCard item={item} />
                </Col>
              ))}
          </Row>
        </>
      )}

      {appIcons.filter((item) => item.category === "thoughts").length > 0 && (
        <>
          <h6>Thoughts:</h6>
          <Row className="row-cols-2 row-cols-md-3 row-cols-lg-4 row-cols-xl-6 g-3 mb-4">
            {appIcons
              .filter((item) => item.category === "thoughts")
              .map((item) => (
                <Col key={item.title}>
                  <ReactIconCard item={item} />
                </Col>
              ))}
          </Row>
        </>
      )}

      {appIcons.filter((item) => item.category === "out of body").length >
        0 && (
        <>
          <h6>Out of body:</h6>
          <Row className="row-cols-2 row-cols-md-3 row-cols-lg-4 row-cols-xl-6 g-3 mb-4">
            {appIcons
              .filter((item) => item.category === "out of body")
              .map((item) => (
                <Col key={item.title}>
                  <ReactIconCard item={item} />
                </Col>
              ))}
          </Row>
        </>
      )}

      {appIcons.filter((item) => item.category === "favorite").length > 0 && (
        <>
          <h6>Favorite:</h6>
          <Row className="row-cols-2 row-cols-md-3 row-cols-lg-4 row-cols-xl-6 g-3 mb-4">
            {appIcons
              .filter((item) => item.category === "favorite")
              .map((item) => (
                <Col key={item.title}>
                  <ReactIconCard item={item} />
                </Col>
              ))}
          </Row>
        </>
      )}

      {appIcons.filter((item) => item.category === "resolution").length > 0 && (
        <>
          <h6>Resolution:</h6>
          <Row className="row-cols-2 row-cols-md-3 row-cols-lg-4 row-cols-xl-6 g-3 mb-4">
            {appIcons
              .filter((item) => item.category === "resolution")
              .map((item) => (
                <Col key={item.title}>
                  <ReactIconCard item={item} />
                </Col>
              ))}
          </Row>
        </>
      )}

      {appIcons.filter((item) => item.category === "notifications").length >
        0 && (
        <>
          <h6>Notifications:</h6>
          <Row className="row-cols-2 row-cols-md-3 row-cols-lg-4 row-cols-xl-6 g-3 mb-4">
            {appIcons
              .filter((item) => item.category === "notifications")
              .map((item) => (
                <Col key={item.title}>
                  <ReactIconCard item={item} />
                </Col>
              ))}
          </Row>
        </>
      )}

      {appIcons.filter((item) => item.category === "leaderboard").length >
        0 && (
        <>
          <h6>Leaderboard:</h6>
          <Row className="row-cols-2 row-cols-md-3 row-cols-lg-4 row-cols-xl-6 g-3 mb-4">
            {appIcons
              .filter((item) => item.category === "leaderboard")
              .map((item) => (
                <Col key={item.title}>
                  <ReactIconCard item={item} />
                </Col>
              ))}
          </Row>
        </>
      )}

      {appIcons.filter((item) => item.category === "popular insights").length >
        0 && (
        <>
          <h6>Popular insights:</h6>
          <Row className="row-cols-2 row-cols-md-3 row-cols-lg-4 row-cols-xl-6 g-3 mb-4">
            {appIcons
              .filter((item) => item.category === "popular insights")
              .map((item) => (
                <Col key={item.title}>
                  <ReactIconCard item={item} />
                </Col>
              ))}
          </Row>
        </>
      )}

      {appIcons.filter((item) => item.category === "add user").length > 0 && (
        <>
          <h6>Add user / friend:</h6>
          <Row className="row-cols-2 row-cols-md-3 row-cols-lg-4 row-cols-xl-6 g-3 mb-4">
            {appIcons
              .filter((item) => item.category === "add user")
              .map((item) => (
                <Col key={item.title}>
                  <ReactIconCard item={item} />
                </Col>
              ))}
          </Row>
        </>
      )}

      {appIcons.filter((item) => item.category === "social").length > 0 && (
        <>
          <h6>Social:</h6>
          <Row className="row-cols-2 row-cols-md-3 row-cols-lg-4 row-cols-xl-6 g-3 mb-4">
            {appIcons
              .filter((item) => item.category === "social")
              .map((item) => (
                <Col key={item.title}>
                  <ReactIconCard item={item} />
                </Col>
              ))}
          </Row>
        </>
      )}

      {/* <div className="pt-3 pb-3">
        <h6>All Icons:</h6>
        <Row className="row-cols-2 row-cols-md-3 row-cols-lg-4 row-cols-xl-6 g-3 mb-4">
          {appIcons.map((item) => (
            <Col key={item.title}>
              <ReactIconCard item={item} />
            </Col>
          ))}
        </Row>
      </div> */}

      {/* <Row className="row-cols-2 row-cols-md-3 row-cols-lg-4 row-cols-xl-6 g-3">
        {appIcons.map((item) => (
          <Col key={item.title}>
            <Card>
              <Card.Body className="text-center position-relative">
                <div className="lh-1" style={{ fontSize: "40px" }}>
                  <CustomIcon title={item.title} tag={item.tag} className="" />
                </div>
                <div className="mt-2 me-0 font-15 fw_sb custom_ta ag_golden">
                  {item.title}
                </div>
                <hr />
                <div className="">{item.tag}</div>
                <div className="mt-2">{item.familyName}</div>
                <Button
                  type="button"
                  className="btn btn_theme btn_icon btn_primary position-absolute end-0 top-0 pe-none"
                >
                  {item.familyCode}
                </Button>
              </Card.Body>
            </Card>
          </Col>
        ))}
      </Row> */}
    </Container>
  );
}

export default AppIcons;