import React, { useState, useEffect, useReducer} 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 { Button } from "@material-ui/core";  
import MTable from "../../components/Report/MTable";   
import PropTypes from 'prop-types';
import Box from '@mui/material/Box';


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 === "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: 'Atendente', field: 'user.name' },
    { title: 'Contato', field: 'contact.number' },
    { title: 'Assunto', field: 'queue.name' },
    { title: 'Status', field: 'status' },
    { title: 'Criado', field: 'createdAt' },
    
    { title: 'Atualizado', field: 'updatedAt',

    /*cellStyle: {
      backgroundColor: '#039be5',
      color: '#FFF'
    },
    headerStyle: {
      backgroundColor: '#039be5',
      fontSize: 12
    }*/
  
  },

    
  ];

  const currencies = [
    {
      value: '1',
      label: 'Adriano',
    },
    {
      value: '2',
      label: 'Aguinaldo',
    },
    {
      value: '3',
      label: 'Maria',
    },
    {
      value: '4',
      label: 'Suely',
    },
    {
      value: '0',
      label: '',
    },
    
  ];
 
 

const Report = () => { 
  
  //-------- 
  const [searchParam, setSearchParam] = useState("");
  const [loading, setLoading] = useState(false);
  const [hasMore, setHasMore] = useState(false); 
  const [pageNumber, setPageNumber] = useState(1);  
  const [users, dispatch] = useReducer(reducer, []);

  const [tot, setTot] = useState(0)
  const [columns, setColums] = useState(columnsData)
  const [datePicker1, setDatePicker1] = useState(new Date()) 
  const [datePicker2, setDatePicker2] = useState(new Date()) 
  const [userId, setUser] = useState(null) 

  useEffect(() => {
    dispatch({ type: "RESET" });
    setPageNumber(1);
  }, [searchParam]);

  useEffect(() => {
    setLoading(true);
    const delayDebounceFn = setTimeout(() => {
      const fetchUsers = async () => {
        try {
          const { data } = await api.get("/users/", {
            params: { searchParam, pageNumber },
          });
          dispatch({ type: "LOAD_USERS", payload: data.users });
          setHasMore(data.hasMore);
          setLoading(false);
        } catch (err) {
          console.log(err);
        }
      };
      fetchUsers();
    }, 500);
    return () => clearTimeout(delayDebounceFn);
  }, [searchParam, pageNumber]);
 


  function handleTot (){  
    setTot(tot+1) 

    console.log('Datepicker valeu: ',DatePicker1.data)
   /* if(tot == 3){
        setColums(columns1)
    } */  

}  

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

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

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

  return ( 
    
    <MainContainer> 
 
          
          <Box sx={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)' }}>
          
            <Item><SelectField func={textFieldSelectUser} currencies={currencies}/></Item>
            <Item><DatePicker1 func={datePicker1Value} title={'Data inicio'}/></Item>
            <Item><DatePicker2 func={datePicker2Value} title={'Data fim'}/></Item>
            
            <Item sx={{ gridColumn: '4 / 5' }}>
              <Button size="small" variant="contained" onClick={()=>{handleTot()}}>GO</Button>
            </Item> 
            
          </Box>

          <Box  sx={{
              display: 'grid',  
            }}>
            <Item  sx={{ gridColumn: '1', gridRow: 'span 1' }}> 
              <MTable data={data} columns={columns}/> 
            </Item>
          </Box>
 

        
  {/*   <MainHeader>
      <Title>{i18n.t("users.title")}</Title>
      <MainHeaderButtonsWrapper>
       
      </MainHeaderButtonsWrapper>
    </MainHeader>


   <Paper
      className={classes.mainPaper}
      variant="outlined"
      onScroll={handleScroll}
    >
      <Table size="small">
        <TableHead>
          <TableRow>
            <TableCell align="center">{i18n.t("users.table.name")}</TableCell>
            <TableCell align="center">
              {i18n.t("users.table.email")}
            </TableCell>
            <TableCell align="center">
              {i18n.t("users.table.profile")}
            </TableCell>
            
            <TableCell align="center">
              {i18n.t("users.table.actions")}
            </TableCell>

          </TableRow>
        </TableHead>
        <TableBody>
          <>
            {users.map((user) => (
              <TableRow key={user.id}>
                <TableCell align="center">{user.name}</TableCell>
                <TableCell align="center">{user.email}</TableCell>
                <TableCell align="center">{user.profile}</TableCell>
                
                <TableCell align="center"> 
                

                </TableCell>

              </TableRow>
            ))}
            {loading && <TableRowSkeleton columns={4} />}
          </>
        </TableBody>
         </Table>
        </Paper>*/}

        </MainContainer>
    
  )
};

export default Report;