import React, { useState, useEffect, useReducer, useContext, useRef } from "react";
import MainContainer from "../../components/MainContainer";
import api from "../../services/api";
import SelectField from "../../components/Report/SelectField";
//import { data } from '../../components/Report/MTable/data';
import DatePicker1 from "../../components/Report/DatePicker";
import DatePicker2 from "../../components/Report/DatePicker";
import MTable from "../../components/Report/MTable";
import PropTypes from "prop-types";
import Box from "@mui/material/Box";
import { AuthContext } from "../../context/Auth/AuthContext";
import { Can } from "../../components/Can";

import { Button } from "@material-ui/core";

import ReportModal from "../../components/ReportModal";
import MaterialTable from "material-table";

import LogoutIcon from "@material-ui/icons/CancelOutlined";

import { CSVLink } from "react-csv";

import openSocket from "socket.io-client";

const report = [
  { value: "1", label: "Atendimento por atendentes" },
  { value: "2", label: "Usuários online/offline" },
];

let columns = [
  {
    key: "ticket.whatsapp.name",
    label: "Loja",
  },

  {
    key: "id",
    label: "id Mensagem",
  },

  {
    key: "ticket.id",
    label: "id Conversa",
  },

  {
    key: "ticket.contact.name",
    label: "Cliente",
  },

  {
    key: "ticket.user.name",
    label: "Atendente",
  },
  {
    key: "body",
    label: "Mensagem",
  },
  {
    key: "fromMe",
    label: "Sentido",
  },
  {
    key: "createdAt",
    label: "Criada",
  },
  {
    key: "ticket.contact.number",
    label: "Telefone cliente",
  },
  {
    key: "ticket.queue.name",
    label: "Fila",
  },
  {
    key: "ticket.status",
    label: "Status",
  },
  {
    key: "ticket.statusChatEnd",
    label: "Status de encerramento",
  },
];

//

const reducerQ = (state, action) => {
  if (action.type === "DELETE_USER_STATUS") {
    const userId = action.payload;

    //console.log('Entrou no delete user status userId: ', userId)

    const userIndex = state.findIndex((u) => `${u.id}` === `${userId}`);

    // console.log('>>>>>>>>>>>>>>>>>>>>> userIndex: ', userIndex)

    if (userIndex !== -1) {
      state.splice(userIndex, 1);
    }

    return [...state];
  }

  if (action.type === "LOAD_QUERY") {
    const queries = action.payload;
    const newQueries = [];

    queries.forEach((query) => {
      const queryIndex = state.findIndex((q) => q.id === query.id);

      if (queryIndex !== -1) {
        state[queryIndex] = query;
      } else {
        newQueries.push(query);
      }
    });

    return [...state, ...newQueries];
  }

  if (action.type === "UPDATE_STATUS_ONLINE") {
    let onlineUser = action.payload;
    let index = -1;

    // console.log('sssssssssstate: ', state, '           |   ONLINE USERS:  onlineUser.userId ', onlineUser.userId)

    if (onlineUser.sumOpen || onlineUser.sumClosed) {
      index = state.findIndex(
        (e) =>
          (onlineUser.sumOpen && e.id === onlineUser.sumOpen.userId) ||
          (onlineUser.sumClosed && e.id === onlineUser.sumClosed.userId)
      );
    } else {
      index = state.findIndex((e) => `${e.id}` === `${onlineUser.userId}`);
    }

    //console.log(' *********************** index: ', index)

    if (index !== -1) {
      //  console.log('ENTROU NO INDEX')

      if (!("statusOnline" in state[index])) {
        state[index].statusOnline = onlineUser;
      } else if ("statusOnline" in state[index]) {
        state[index].statusOnline["status"] = onlineUser.status;
      }

      if ("onlineTime" in onlineUser) {
        if ("sumOnlineTime" in state[index]) {
          state[index].sumOnlineTime["sum"] = onlineUser.onlineTime.split(" ")[1];
        } else if (!("sumOnlineTime" in state[index])) {
          state[index].sumOnlineTime = {
            userId: onlineUser.userId,
            sum: onlineUser.onlineTime.split(" ")[1],
          };
        }
      }

      if (onlineUser.sumOpen) {
        if ("sumOpen" in state[index]) {
          // console.log(' >>>>>>>>>>>>>>>>>> sumOpen 1  | state[index].sumOpen["count"]: ', state[index].sumOpen['count'], '  |  onlineUser.sumOpen.count: ', onlineUser.sumOpen.count)
          state[index].sumOpen["count"] = onlineUser.sumOpen.count;
        } else if (!("sumOpen" in state[index])) {
          // console.log(' >>>>>>>>>>>>>>>>>> sumOpen 1')
          state[index].sumOpen = onlineUser.sumOpen;
        }
      }

      if (onlineUser.sumClosed) {
        if ("sumClosed" in state[index]) {
          // console.log(' >>>>>>>>>>>>>>>>>> sumClosed 1  | state[index].sumClosed["count"]: ', state[index].sumClosed['count'], '  |  onlineUser.sumClosed.count: ', onlineUser.sumClosed.count)
          state[index].sumClosed["count"] = onlineUser.sumClosed.count;
        } else if (!("sumClosed" in state[index])) {
          // console.log(' >>>>>>>>>>>>>>>>>> sumOpen 1')
          state[index].sumClosed = onlineUser.sumClosed;
        }
      }
    }
    return [...state];
  }

  if (action.type === "RESET") {
    return [];
  }
};

const reducer = (state, action) => {
  if (action.type === "LOAD_USERS") {
    const users = action.payload;
    const newUsers = [];

    users.forEach((user) => {
      const userIndex = state.findIndex((u) => u.id === user.id);
      if (userIndex !== -1) {
        state[userIndex] = user;
      } else {
        newUsers.push(user);
      }
    });

    return [...state, ...newUsers];
  }

  if (action.type === "DELETE_USER") {
    const userId = action.payload;

    const userIndex = state.findIndex((u) => u.id === userId);
    if (userIndex !== -1) {
      state.splice(userIndex, 1);
    }
    return [...state];
  }

  if (action.type === "RESET") {
    return [];
  }
};

function Item(props) {
  const { sx, ...other } = props;
  return (
    <Box
      sx={{
        bgcolor: (theme) => (theme.palette.mode === "dark" ? "#101010" : "#fff"),
        color: (theme) => (theme.palette.mode === "dark" ? "grey.300" : "grey.800"),
        border: "1px solid",
        borderColor: (theme) => (theme.palette.mode === "dark" ? "grey.800" : "grey.300"),
        p: 1,
        m: 1,
        borderRadius: 2,
        fontSize: "0.875rem",
        fontWeight: "700",
        ...sx,
      }}
      {...other}
    />
  );
}

Item.propTypes = {
  sx: PropTypes.oneOfType([
    PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])),
    PropTypes.func,
    PropTypes.object,
  ]),
};

let columnsData = [
  { title: "Unidade", field: "whatsapp.name" },
  { title: "Atendente", field: "user.name" },
  { title: "Contato", field: "contact.number" },
  { title: "Nome", field: "contact.name" },
  { title: "Assunto", field: "queue.name" },

  { title: "Status", field: "status" },

  { title: "Criado", field: "createdAt" },
  //{title: 'Atualizado', field: 'updatedAt'},
  { title: "Status de encerramento", field: "statusChatEnd" },
];

const Report = () => {
  const csvLink = useRef();

  const { user: userA } = useContext(AuthContext);

  //--------
  const [searchParam] = useState("");
  //const [loading, setLoading] = useState(false);
  //const [hasMore, setHasMore] = useState(false);
  const [pageNumber, setPageNumber] = useState(1);
  const [users, dispatch] = useReducer(reducer, []);
  //const [columns, setColums] = useState([])
  const [startDate, setDatePicker1] = useState(new Date());
  const [endDate, setDatePicker2] = useState(new Date());
  const [userId, setUser] = useState(null);
  const [query, dispatchQ] = useReducer(reducerQ, []);

  const [dataCSV, setDataCSV] = useState([]);
  const [isMount, setIsMount] = useState(true);

  const [reportOption, setReport] = useState("1");
  const [reporList] = useState(report);
  const [profile, setProfile] = useState("");
  const [dataRows, setData] = useState([]);

  useEffect(() => {
    dispatch({ type: "RESET" });
    dispatchQ({ type: "RESET" });

    setPageNumber(1);
  }, [searchParam, profile]);

  useEffect(() => {
    //setLoading(true);

    const delayDebounceFn = setTimeout(() => {
      const fetchUsers = async () => {
        try {
          //console.log('profile:  ', profile)

          const { data } = await api.get("/users/", {
            params: { searchParam, pageNumber, profile },
          });

          dispatch({ type: "LOAD_USERS", payload: data.users });
          //setHasMore(data.hasMore);
          //setLoading(false);
        } catch (err) {
          console.log(err);
        }
      };

      fetchUsers();
    }, 500);
    return () => clearTimeout(delayDebounceFn);
  }, [searchParam, pageNumber, reportOption, profile]);

  useEffect(() => {
    //setLoading(true);

    const delayDebounceFn = setTimeout(() => {
      const fetchQueries = async () => {
        try {
          if (reportOption === "1") {
            const dataQuery = await api.get("/reports/", {
              params: { userId, startDate, endDate },
            });
            dispatchQ({ type: "RESET" });
            dispatchQ({ type: "LOAD_QUERY", payload: dataQuery.data });

            //setLoading(false);

            // console.log('dataQuery: ', dataQuery.data)

            // console.log()
          } else if (reportOption === "2") {
            const dataQuery = await api.get("/reports/user/services", {
              params: { userId, startDate, endDate },
            });
            dispatchQ({ type: "RESET" });
            dispatchQ({ type: "LOAD_QUERY", payload: dataQuery.data });

            //setLoading(false);

            //  console.log('REPORT 2 dataQuery : ', dataQuery.data)

            //console.log()
          }
        } catch (err) {
          console.log(err);
        }
      };

      fetchQueries();
    }, 500);
    return () => clearTimeout(delayDebounceFn);
  }, [userId, startDate, endDate, reportOption]);

  // Get from child 1
  const datePicker1Value = (data) => {
    setDatePicker1(data);
  };

  // Get from child 2
  const datePicker2Value = (data) => {
    setDatePicker2(data);
  };

  // Get from child 3
  const textFieldSelectUser = (data) => {
    setUser(data);
  };

  // Get from report option
  const reportValue = (data) => {
    setReport(data);

    // console.log('        data: ', data)
  };

  useEffect(() => {
    if (reportOption === "1") {
      setProfile("");
    } else if (reportOption === "2") {
      setProfile("user");
    }
  }, [reportOption]);

  // useEffect(() => {

  // console.log('>>>>>>>>>>>>>>>>>> New query: ', query)

  // }, [query])

  // test del

  const handleCSVMessages = () => {
    // setLoading(true);

    const fetchQueries = async () => {
      try {
        const dataQuery = await api.get("/reports/messages", {
          params: { userId, startDate, endDate },
        });

        // console.log('dataQuery messages: ', dataQuery.data)

        if (dataQuery.data.length > 0) {
          let dataCSVFormat = dataQuery.data;

          for (var i = 0; i < dataCSVFormat.length; i++) {
            if (dataCSVFormat[i].fromMe) {
              dataCSVFormat[i].fromMe = "Atendente";
            } else {
              dataCSVFormat[i].fromMe = "Cliente";
            }
          }

          //  console.log('dataCSVFormat: ', dataCSVFormat)

          setDataCSV(dataCSVFormat);
          setIsMount(false);
          // setDataCSV(dataQuery.data)
        }

        // setLoading(false);
      } catch (err) {
        console.log(err);
      }
    };

    fetchQueries();
  };

  useEffect(() => {
    if (isMount) {
      return;
    }

    csvLink.current.link.click();
  }, [dataCSV, isMount, csvLink]);

  useEffect(() => {
    if (reportOption === "2") {
      const socket = openSocket(process.env.REACT_APP_BACKEND_URL);

      socket.on("onlineStatus", (data) => {
        //  setLoading(true);

        let date = new Date().toLocaleDateString("pt-BR").split("/");
        let dateToday = `${date[2]}-${date[1]}-${date[0]}`;

        //  console.log('date: ', new Date(startDate).toLocaleDateString('pt-BR'))
        // console.log('date2: ', startDate)

        if (
          data.action === "logout" ||
          (data.action === "update" &&
            `${startDate}` === `${endDate}` &&
            `${endDate}` === `${dateToday}` &&
            `${startDate}` === `${dateToday}`)
        ) {
          //console.log('UPDATE FROM ONLINE/OFFLINE LOGED USERS: ', data.userOnlineTime, ' | data.action : ', data.action)

          dispatchQ({ type: "UPDATE_STATUS_ONLINE", payload: data.userOnlineTime });
        } else if (data.action === "delete") {
          dispatchQ({ type: "DELETE_USER_STATUS", payload: data.userOnlineTime });
        }

        //  setLoading(false);
      });

      socket.on("user", (data) => {
        if (data.action === "delete") {
          // console.log(' entrou no delete user: ', data)
          dispatch({ type: "DELETE_USER", payload: +data.userId });
        }
      });

      return () => {
        socket.disconnect();
      };
    }
  }, [reportOption, startDate, endDate]);

  //   const handleDeleteRows = (id) => {

  //   let _data = [...dataRows];

  //   _data.forEach(rd => {
  //     _data = _data.filter(t => t.id !== id);
  //   });
  //   setData(_data);

  // };

  useEffect(() => {
    //if (!loading) {

    // setData(query.map(({ scheduleReminder, ...others }) => (
    //   { ...others, 'scheduleReminder': `${others.statusChatEndId}` === '3' ? 'Agendamento' : 'Lembrete' }
    // )))
    // }

    setData(
      query.map((column) => {
        return { ...column };
      })
    );
  }, [query]);

  const handleLogouOnlineUser = async (userId) => {
    try {
      await api.get(`/users/logout/${userId}`);
      //toast.success(("Desloged!"));
      //handleDeleteRows(scheduleId)
    } catch (err) {
      // toastError(err);
    }
  };

  return (
    <Can
      role={userA.profile}
      perform="ticket-report:show"
      yes={() => (
        <MainContainer>

          <Box sx={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)' }}>

            <Item><SelectField func={textFieldSelectUser} emptyField={true} header={'Usuário'} currencies={users.map((obj) => {
              return { 'value': obj.id, 'label': obj.name }
            })} /></Item>

            <Item><DatePicker1 func={datePicker1Value} minDate={true} startEmpty={false} title={'Data inicio'} /></Item>
            <Item><DatePicker2 func={datePicker2Value} minDate={false} startEmpty={false} title={'Data fim'} /></Item>

            <Item>
              <DatePicker1
                func={datePicker1Value}
                minDate={false}
                startEmpty={false}
                title={"Data inicio"}
              />
            </Item>
            <Item>
              <DatePicker2
                func={datePicker2Value}
                minDate={false}
                startEmpty={false}
                title={"Data fim"}
              />
            </Item>

            <Item sx={{ display: "grid", gridColumn: "4 / 5" }}>
              <ReportModal currencies={reporList} func={reportValue} reportOption={reportOption} />

              <div style={{ margin: "2px" }}></div>

                <div> 
                  {/* <Button
                    variant="contained" 
                    color="primary"
                    onClick={(e) => handleCSVMessages()}
                  >
                    {"CSV ALL"}
                  </Button> */}

                  <div>
                    <CSVLink
                      data={dataCSV}
                      headers={columns}
                      filename={"Relatorio_detalhado_atendimento_atendentes.csv"}
                      target={"_blank"}
                      ref={csvLink}
                    />
                  </div>
                </div>
              )}
            </Item>
          </Box>

          <Box
            sx={{
              display: "grid",
            }}
          >
            <Item sx={{ gridColumn: "1", gridRow: "span 1" }}>
              {reportOption === "1" && (
                <MTable
                  data={query}
                  columns={columnsData}
                  hasChild={true}
                  removeClickRow={false}
                  table_title={"Atendimento por atendentes"}
                />
              )}
              {reportOption === "2" && (
                <MaterialTable
                  localization={{
                    header: {
                      actions: "Deslogar",
                    },
                  }}
                  title="Usuários online/offline"
                  columns={[
                    // { title: 'Foto', field: 'ticket.contact.profilePicUrl', render: rowData => <img src={rowData['ticket.contact.profilePicUrl']} alt="imagem de perfil do whatsapp" style={{ width: 40, borderRadius: '50%' }} /> },
                    { title: "Nome", field: "name", cellStyle: { whiteSpace: "nowrap" } },

                    {
                      title: "Status",
                      field: "statusOnline.status",

                      cellStyle: (e, rowData) => {
                        if (rowData["statusOnline"] && rowData["statusOnline"].status) {
                          if (rowData["statusOnline"].status === "offline") {
                            return { color: "red" };
                          } else if (rowData["statusOnline"].status === "online") {
                            return { color: "green" };
                          } else if (rowData["statusOnline"].status === "logout...") {
                            return { color: "orange" };
                          } else if (rowData["statusOnline"].status === "waiting...") {
                            return { color: "orange" };
                          }
                        }
                      },
                    },

                    { title: "Tempo online", field: "sumOnlineTime.sum" },
                    { title: "Data inicio", field: "startDate" },
                    { title: "Data fim", field: "endDate" },
                    { title: "Em atendimento", field: "sumOpen.count" },
                    { title: "Finalizado", field: "sumClosed.count" },
                  ]}
                  data={dataRows}
                  // icons={tableIcons}

                  actions={[
                    (rowData) => {
                      if (
                        rowData.statusOnline &&
                        rowData.statusOnline["status"] &&
                        rowData.statusOnline["status"] === "online"
                      ) {
                        return {
                          icon: LogoutIcon,
                          tooltip: "deslogar",
                          disable: false,
                          onClick: (event, rowData) => {
                            // console.log('              ROW DATA INFO: ', rowData, ' | rowData: ', rowData.id)
                            handleLogouOnlineUser(rowData.id);
                          },
                        };
                      }
                    },
                  ]}
                  options={{
                    search: true,
                    selection: false,
                    paging: false,
                    padding: "dense",
                    sorting: true,
                    //loadingType: 'linear',
                    searchFieldStyle: {
                      width: 300,
                    },

                    pageSize: 20,
                    headerStyle: {
                      position: "sticky",
                      top: "0",
                    },
                    maxBodyHeight: "400px",

                    rowStyle: {
                      fontSize: 14,
                    },

                    // cellStyle: (rowData) => {
                    //   return {
                    //     fontSize: 12,
                    //     color: "#fff",

                    //   };
                    // }
                  }}
                />
              )}
            </Item>
          </Box>
        </MainContainer>
      )}
    />
  );
};

export default Report;