import React, { useEffect, useState } from "react"; import { MdNavigateNext } from "react-icons/md"; import CTS from "ctstable"; import axios from "axios"; import { FaBackward } from "react-icons/fa"; import { TbPlayerTrackNextFilled } from "react-icons/tb";

export default function PageMainTest() {

  const [page_current, set_page_current] = useState(1);
  const [page_per_row, set_page_per_row] = useState(10);
  const [count, set_count] = useState(0);
  const [is_loading, set_is_loading] = useState(true);
  const [data, set_data] = useState([]);
  const [search_data, set_search_data] = useState(null);
  const [use_count_row, set_use_count_row] = useState({
      title: "ល.រ​",
      style: defualtColumHeader
  });



  var defualtColumHeader = {
    textAlign: "center",
    color: "black",
    paddingTop: "10px",
    paddingBottom: "10px"
  };



  var row_style = {
    row_background: {
      odd: "#dedede",
      even: "#ffffff"
    },
    hover_background: "orange",
    line_color: "#f1f1f1"
  };


  useEffect(() => {
    set_is_loading(true);

    axios.get(`https:{ur-api}?show_per_page=${page_per_row}&current_page=${page_current}${search_data}`).then((res) => {
      var list = res.data.data;
      set_data(list);
      set_is_loading(false);
      if (
        search_data == null ||
        search_data == "" ||
        search_data == undefined) {

        } else {
           set_count(res.data.data.length);
        }

      });

      axios
        .get(
          `https://{ur-api}`,
          {
            headers: {
              Authorization: {token} },
          }
        )
        .then((res) => {
          if (
            search_data == null ||
            search_data == "" ||
            search_data == undefined
          ) {
            set_count(res.data.data.length);
          } else {
          }
        });

  }, [page_per_row, page_current, search_data]);



    var column = [
    {
    title: "កូនសោរ",
    style: defualtColumHeader,
    selector: (row) => <div style={{ textAlign: "left" }}>{row.key}</div>,
    },

        {
          title: "ឈ្មោះ",
          style: { color: "black", textAlign: "center" },
          selector: (row) => (
            <div onClick={() => alert(row.key)} style={{ color: "gray" }}>
              {row.search_name}
            </div>
          ),
        },

        {
          title: "លេខទូរស័ព្ទ",
          style: defualtColumHeader,
          selector: (row) => <div  onClick={() => alert(row.key)}>
            {row.search_tel}
          </div>,
        },

    ];


    var column_style = {
    backgroundColor: "white",
    color: "black",
    };
    var pagination = {
    title_next: {
    name: "Next",
    style: null,
    },
    title_previous: {
    name: "Prev",
    style: null,
    },

        title_first: {
          name: <FaBackward />,
          style: null,
        },

        title_last: {
          name: <TbPlayerTrackNextFilled />,
          style: null,
        },
        page_data: {
          title_1: "Show page",
          title_2: "of",
          title_3: "result",
          title_4: "",
          page_current: page_current,
          page_per_row: page_per_row,
          count_list: count,
          style: null,
        },

    };

  function event_back() {
    set_page_current(page_current <= 1 ? 1 : page_current - 1);
  }

  function event_next() {
    set_page_current(
      page_current <
      Math.ceil(
      pagination.page_data.count_list / pagination.page_data.page_per_row
    )
      ? page_current + 1
      : Math.ceil(
      pagination.page_data.count_list / pagination.page_data.page_per_row
      )
    );
  }

  function event_search(e) {
  if (e == null || e == "") {
    set_page_current(1);
    set_search_data(null);
  } else {
    set_page_current(1);
    set_search_data(`&search=${e}&search_by=search_name`);
  }
  }

  return (

    <div>
      <CTS
      event_back={() => event_back()}
      event_next={() => event_next()}
      event_back_first={() => set_page_current(1)}
      event_next_last={() =>
      set_page_current(
      Math.ceil(
      pagination.page_data.count_list /
      pagination.page_data.page_per_row))}
      event_number_pagination={(i) => set_page_current(i)}
      event_row_per_page={(i) => set_page_per_row(i)}
      data={data}
      column_style={column_style}
      column={column}
      pagination={pagination}
      is_loading={is_loading}
      loading_page={null}
      no_data_found={null}
      use_count_row={use_count_row}
      search_bar={{
                title: "ស្វែងរក",
                place_holder: "Search by name...",
                show_button: false,
                style: {
                  color: "black",
                },
              }}
      event_search={(e) =>
      set_search_data(`&search=${e}&search_by=search_name`)
      }
      event_onchange_search={(e) => event_search(e)}
      row_style={row_style}/>

    </div>

    );
}