import React, { useEffect, useState } from "react";
import { ChevronDown } from "react-feather";
import {
  Card,
  CardHeader,
  CardTitle,
  Input,
  Label,
  Row,
  Col,
} from "reactstrap";
import DataTable from "react-data-table-component";
import ReactPaginate from "react-paginate";
import { useTranslation } from "react-i18next";
import { useSelector, useDispatch } from "react-redux";
import { getUserHistory } from "../redux/actions/userHistory";

const UserActivity = () => {
  const dispatch = useDispatch();
  const { t } = useTranslation();

  const serverSideColumns = [
    {
      name: t("Activities.type"),
      selector: (row) => row.logType,
      sortable: true,
      maxWidth: "500px",
    },
    {
      name: t("Activities.message"),
      selector: (row) => row.logMessage,
      sortable: true,
      maxWidth: "500px",
    },
    {
      name: t("Time"),
      selector: (row) => row.createdDateTime,
      sortable: false,
      minWidth: "350px",
      cell: (row) => (
        <span>
          {row.createdDateTime
            ? new Date(row.createdDateTime).toLocaleString("tr-TR")
            : "-"}
        </span>
      ),
    },
  ];

  const [currentPage, setCurrentPage] = useState(1);
  const [rowsPerPage, setRowsPerPage] = useState(5);

  const userHistoriesStore = useSelector((state) => state.userHistory);
  const [userHistories, setUserHistories] = useState([]);

  useEffect(() => {
    dispatch(getUserHistory({ currentPage, rowsPerPage }));
  }, [currentPage, rowsPerPage]);
  useEffect(() => {
    if (userHistoriesStore.userHistories?.content) {
      setUserHistories(userHistoriesStore.userHistories?.content);
    }
  }, [
    userHistoriesStore?.userHistories?.content?.length,
    userHistoriesStore?.userHistories,
  ]);

  const handlePagination = (page) => {
    setCurrentPage(page.selected + 1);
    setUserHistories(userHistoriesStore.userHistories?.content);
  };

  const handlePerPage = (e) => {
    setCurrentPage(1);
    setRowsPerPage(parseInt(e.target.value));
    setUserHistories(userHistoriesStore.userHistories?.content);
  };

  const CustomPagination = () => {
    const count = Number(
      (
        userHistoriesStore?.userHistories?.pageInfo?.totalElements / rowsPerPage
      ).toFixed(1)
    );

    return (
      <ReactPaginate
        previousLabel={""}
        nextLabel={""}
        breakLabel="..."
        pageCount={count || 1}
        marginPagesDisplayed={2}
        pageRangeDisplayed={2}
        activeClassName="active"
        forcePage={currentPage !== 0 ? currentPage - 1 : 0}
        onPageChange={(page) => handlePagination(page)}
        pageClassName={"page-item"}
        nextLinkClassName={"page-link"}
        nextClassName={"page-item next"}
        previousClassName={"page-item prev"}
        previousLinkClassName={"page-link"}
        pageLinkClassName={"page-link"}
        breakClassName="page-item"
        breakLinkClassName="page-link"
        containerClassName={
          "pagination react-paginate separated-pagination pagination-sm justify-content-end pr-1 mt-1"
        }
      />
    );
  };

  const ExpandableTable = ({ data }) => {
    return (
      <div className="expandable-content p-2">
        <p className="font-weight-bold">{data?.logType}</p>
        <p className="font-small-3 mt-2">{data.logMessage}</p>
      </div>
    );
  };

  return (
    <div style={{ marginTop: "2%" }}>
      <Card>
        <CardHeader className="border-bottom">
          <CardTitle tag="h4">Kullanıcı Aktiviteleri</CardTitle>
        </CardHeader>
        <Row className="mx-0 mt-1 mb-50">
          <Col sm="6" md="2">
            <div className="d-flex align-items-center">
              <Label for="sort-select">{t("Show")}</Label>
              <Input
                className="ml-1 dataTable-select"
                type="select"
                id="sort-select"
                value={rowsPerPage}
                onChange={(e) => handlePerPage(e)}
              >
                <option value={5}>5</option>
                <option value={10}>10</option>
                <option value={25}>25</option>
                <option value={50}>50</option>
                <option value={75}>75</option>
                <option value={100}>100</option>
              </Input>
            </div>
          </Col>
        </Row>
        <DataTable
          noHeader
          pagination
          paginationServer
          className="react-dataTable"
          columns={serverSideColumns}
          sortIcon={<ChevronDown size={10} />}
          paginationComponent={CustomPagination}
          expandableRows
          expandOnRowClicked
          expandableRowsComponent={ExpandableTable}
          data={[...userHistories]}
          noDataComponent={
            <p className="p-2">
              {t("Activities.activity")}
              {t("Warnings.notFound")}
            </p>
          }
        />
      </Card>
    </div>
  );
};

export default UserActivity;