Filterbar Receiving control

import React, { useState, useEffect } from 'react';
import { createStyles } from '@mui/material/styles';
import { Button, Checkbox, Popover, FormControlLabel, Box, Radio, RadioGroup, Chip, Typography, useTheme } from '@mui/material';
import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
import axiosInstance from 'utils/axiosInstance';
import DateRangePicker from 'ui-component/DateRangePicker/dateRangePicker';
import PropTypes from 'prop-types';
// import { fetchLogistics } from 'views/utilities/data/optionsData';

const styles = createStyles({
  appBar: {
    marginY: '10px',
    display: 'flex',
    flexDirection: 'row',
    gap: '6px',
    alignItems: 'top',
    fontSize: '11px'
  },
  filterBar: {
    width: '100%',
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'left',
    gap: '6px',
    alignItems: 'baseline',
    fontSize: '11px',
    fontWeight: '700',
    color: '#000',
    boxShadow: 'none'
  },
  btnFilter: {
    border: 'solid 1.5px #949494',
    borderRadius: '100px',
    color: '#434343',
    fontSize: '11px',
    padding: '4px 8px',
    width: 'max-content',
    minWidth: 'unset'
  },
  btnActive: {
    borderRadius: '100px',
    fontSize: '11px',
    color: '#FFFFFF',
    backgroundColor: '#F82C17',
    border: '1px solid #F82C17',
    padding: '4px 8px',
    width: 'max-content',
    minWidth: 'unset'
  },
  selectOption: {
    padding: '6px 12px',
    display: 'flex',
    flexDirection: 'column'
  },
  btnApply: {
    borderRadius: '11px',
    border: '1px solid #F82C17',
    backgroundColor: '#FFFFFF',
    color: '#F82C17',
    fontSize: '11px',
    minWidth: '140px',
    marginTop: '8px'
  },
  btnClearAll: {
    fontSize: '10px',
    backgroundColor: '#808080',
    color: '#FFFFFF',
    borderRadius: '11px',
    marginRight: '4px',
    padding: '3px',
    '&:hover': {
      backgroundColor: '#606060'
    }
  }
});

const FilterBar = ({
  onDateChange,
  startDate,
  endDate,
  handleSelectDate,
  isSelectedDate,

  selectedTag,
  isSelectedTag,
  handleCheckboxTagChange,

  selectedLogistic,
  isSelectedLogistic,
  handleCheckboxLogisticChange,

  selectedStatus,
  isSelectedStatus,
  handleCheckboxStatusChange,

  handleDeleteFilter,
  handleDeleteAll,

  selected
}) => {
  const [anchorTag, setAnchorTag] = useState(null);
  const [anchorLogistic, setAnchorLogistic] = useState(null);
  const [anchorStatus, setAnchorStatus] = useState(null);
  const [anchorDate, setAnchorDate] = useState(null);

  const theme = useTheme();

  const openTag = Boolean(anchorTag);
  const openLogistic = Boolean(anchorLogistic);
  const openStatus = Boolean(anchorStatus);
  const openDate = Boolean(anchorDate);

  const handleTag = (event) => {
    setAnchorTag(event.currentTarget);
  };

  const closeTag = () => {
    setAnchorTag(null);
  };

  const handleLogistic = (event) => {
    setAnchorLogistic(event.currentTarget);
  };

  const closeLogistic = () => {
    setAnchorLogistic(null);
  };

  const handleStatus = (event) => {
    setAnchorStatus(event.currentTarget);
  };

  const closeStatus = () => {
    setAnchorStatus(null);
  };

  const handleDate = (event) => {
    setAnchorDate(event.currentTarget);
  };

  const closeDate = () => {
    setAnchorDate(null);
  };

  //filter date
  const [dateRange, setDateRange] = useState([null, null]);

  const parseISOToDate = (isoDateString) => {
    if (!isoDateString) {
      return null;
    }

    const [year, month, day] = isoDateString.split('-').map(Number);
    return new Date(year, month - 1, day);
  };

  useEffect(() => {
    if (startDate && endDate) {
      const formattedStartDate = parseISOToDate(startDate);
      const formattedEndDate = parseISOToDate(endDate);
      setDateRange([formattedStartDate, formattedEndDate]);
    }
  }, [startDate, endDate]);

  const handleDateChange = (newDateRange) => {
    setDateRange(newDateRange);
    if (onDateChange) {
      onDateChange(newDateRange);
    }
  };

  let formattedStartDate = '';
  let formattedEndDate = '';

  if (startDate !== null) {
    formattedStartDate = startDate.split('-').reverse().join('/');
  }
  if (endDate !== null) {
    formattedEndDate = endDate.split('-').reverse().join('/');
  }

  const [logisticOptions, setLogisticOptions] = useState([]);
  const fetchLogistic = async () => {
    try {
      const response = await axiosInstance.get('logistics/all?is_for_receiving_controll=true');
      const logisticDataApi = response.data.data.map((item) => ({
        id: item.value,
        name: item.label
      }));
      setLogisticOptions(logisticDataApi);
    } catch (error) {
      console.error('Error fetching data:', error);
    }
  };

  useEffect(() => {
    fetchLogistic();
  }, []);

  return (
    <Box sx={styles.appBar}>
      <Box sx={{ display: 'flex', flexDirection: 'column', gap: '6px' }}>
        <Box sx={styles.filterBar}>
          <Typography sx={{ fontSize: '11px', fontWeight: 700, whiteSpace: 'nowrap' }}>Filter By:</Typography>
          <Box sx={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>
            <Box
              sx={{
                display: 'flex',
                gap: '10px',
                [theme.breakpoints.down('sm')]: {
                  paddingBottom: '8px',
                  paddingRight: '25px',
                  maxWidth: '340px',
                  overflow: 'auto',
                  '&::-webkit-scrollbar': {
                    display: 'none'
                  }
                },
                '@media screen and (max-width:400px)': {
                  maxWidth: '300px'
                },
                '@media screen and (max-width:360px)': {
                  maxWidth: '280px'
                }
              }}
            >
              <Button
                size="small"
                endIcon={<KeyboardArrowDownIcon />}
                sx={isSelectedTag ? styles.btnActive : styles.btnFilter}
                onClick={handleTag}
              >
                Tag
              </Button>
              <Popover
                open={openTag}
                onClose={closeTag}
                anchorEl={anchorTag}
                anchorOrigin={{
                  vertical: 'bottom',
                  horizontal: 'left'
                }}
              >
                <Box sx={styles.selectOption}>
                  <FormControlLabel
                    control={
                      <Checkbox
                        size="small"
                        sx={{ padding: '4px' }}
                        checked={selectedTag.includes('Service Point')}
                        onChange={(event) => handleCheckboxTagChange(event, 'service point', 'Service Point')}
                      />
                    }
                    sx={{ '& span': { fontSize: '10px' } }}
                    label="Service Point"
                  />
                  <FormControlLabel
                    control={
                      <Checkbox
                        size="small"
                        sx={{ padding: '4px' }}
                        checked={selectedTag.includes('Vendor')}
                        onChange={(event) => handleCheckboxTagChange(event, 'vendor', 'Vendor')}
                      />
                    }
                    sx={{ '& span': { fontSize: '10px' } }}
                    label="Vendor"
                  />
                  <FormControlLabel
                    control={
                      <Checkbox
                        size="small"
                        sx={{ padding: '4px' }}
                        checked={selectedTag.includes('Warehouse')}
                        onChange={(event) => handleCheckboxTagChange(event, 'warehouse', 'Warehouse')}
                      />
                    }
                    sx={{ '& span': { fontSize: '10px' } }}
                    label="Warehouse"
                  />
                </Box>
              </Popover>
              <Button
                size="small"
                endIcon={<KeyboardArrowDownIcon />}
                sx={isSelectedLogistic ? styles.btnActive : styles.btnFilter}
                onClick={handleLogistic}
              >
                Logistics
              </Button>
              <Popover
                open={openLogistic}
                onClose={closeLogistic}
                anchorEl={anchorLogistic}
                anchorOrigin={{
                  vertical: 'bottom',
                  horizontal: 'left'
                }}
              >
                <Box sx={styles.selectOption}>
                  {logisticOptions.map((logistic) => (
                    <FormControlLabel
                      key={logistic.id}
                      control={
                        <Checkbox
                          size="small"
                          sx={{ padding: '4px' }}
                          checked={selectedLogistic.includes(logistic.name)}
                          onChange={(event) => handleCheckboxLogisticChange(event, logistic.id, logistic.name)}
                        />
                      }
                      sx={{ '& span': { fontSize: '10px' } }}
                      label={logistic.name}
                    />
                  ))}
                </Box>
              </Popover>
              <Button
                size="small"
                endIcon={<KeyboardArrowDownIcon />}
                sx={isSelectedStatus ? styles.btnActive : styles.btnFilter}
                onClick={handleStatus}
              >
                Status
              </Button>
              <Popover
                open={openStatus}
                onClose={closeStatus}
                anchorEl={anchorStatus}
                anchorOrigin={{
                  vertical: 'bottom',
                  horizontal: 'left'
                }}
              >
                <Box sx={styles.selectOption}>
                  <FormControlLabel
                    control={
                      <Checkbox
                        size="small"
                        sx={{ padding: '4px' }}
                        checked={selectedStatus.includes('Verified')}
                        onChange={(event) => handleCheckboxStatusChange(event, 'verified', 'Verified')}
                      />
                    }
                    sx={{ '& span': { fontSize: '10px' } }}
                    label="Verified"
                  />
                  <FormControlLabel
                    control={
                      <Checkbox
                        size="small"
                        sx={{ padding: '4px' }}
                        checked={selectedStatus.includes('Received')}
                        onChange={(event) => handleCheckboxStatusChange(event, 'received', 'Received')}
                      />
                    }
                    sx={{ '& span': { fontSize: '10px' } }}
                    label="Received"
                  />
                  <FormControlLabel
                    control={
                      <Checkbox
                        size="small"
                        sx={{ padding: '4px' }}
                        checked={selectedStatus.includes('Preparing')}
                        onChange={(event) => handleCheckboxStatusChange(event, 'preparing', 'Preparing')}
                      />
                    }
                    sx={{ '& span': { fontSize: '10px' } }}
                    label="Preparing"
                  />
                  <FormControlLabel
                    control={
                      <Checkbox
                        size="small"
                        sx={{ padding: '4px' }}
                        checked={selectedStatus.includes('In Delivery')}
                        onChange={(event) => handleCheckboxStatusChange(event, 'in_delivery', 'In Delivery')}
                      />
                    }
                    sx={{ '& span': { fontSize: '10px' } }}
                    label="In Delivery"
                  />
                </Box>
              </Popover>
              <Button sx={isSelectedDate ? styles.btnActive : styles.btnFilter} endIcon={<KeyboardArrowDownIcon />} onClick={handleDate}>
                Date
              </Button>
              <Popover
                open={openDate}
                onClose={closeDate}
                anchorEl={anchorDate}
                anchorOrigin={{
                  vertical: 'bottom',
                  horizontal: 'left'
                }}
              >
                <Box sx={{ ...styles.selectOption, display: 'flex', flexDirection: 'row' }}>
                  <Box sx={{ display: 'flex', flexDirection: 'column', padding: '3px', minHeight: '200px', marginRight: '4px' }}>
                    <RadioGroup aria-labelledby="demo-radio-buttons-group-label" name="radio-buttons-group">
                      <FormControlLabel
                        value="today"
                        control={
                          <Radio size="small" sx={{ padding: '4px' }} onChange={(event) => handleSelectDate(event.target.value, 'today')} />
                        }
                        sx={{ '& span': { fontSize: '12px' } }}
                        label="Today"
                      />
                      <FormControlLabel
                        value="yesterday"
                        control={
                          <Radio
                            size="small"
                            sx={{ padding: '4px' }}
                            onChange={(event) => handleSelectDate(event.target.value, 'yesterday')}
                          />
                        }
                        sx={{ '& span': { fontSize: '12px' } }}
                        label="Yesterday"
                      />
                      <FormControlLabel
                        value="week"
                        control={
                          <Radio size="small" sx={{ padding: '4px' }} onChange={(event) => handleSelectDate(event.target.value, 'week')} />
                        }
                        sx={{ '& span': { fontSize: '12px' } }}
                        label="This Week"
                      />
                      <FormControlLabel
                        value="sevendays"
                        control={
                          <Radio
                            size="small"
                            sx={{ padding: '4px' }}
                            onChange={(event) => handleSelectDate(event.target.value, 'sevendays')}
                          />
                        }
                        sx={{ '& span': { fontSize: '12px' } }}
                        label="Last 7 days"
                      />
                      <FormControlLabel
                        value="month"
                        control={
                          <Radio size="small" sx={{ padding: '4px' }} onChange={(event) => handleSelectDate(event.target.value, 'month')} />
                        }
                        sx={{ '& span': { fontSize: '12px' } }}
                        label="This Month"
                      />
                      <FormControlLabel
                        value="thirtydays"
                        control={
                          <Radio
                            size="small"
                            sx={{ padding: '4px' }}
                            onChange={(event) => handleSelectDate(event.target.value, 'thirtydays')}
                          />
                        }
                        sx={{ '& span': { fontSize: '12px' } }}
                        label="Last 30 days"
                      />
                    </RadioGroup>
                    <>
                      <span style={{ color: '#6C6C6C', fontSize: '10px' }}>Date range :</span>
                      <span style={{ fontSize: '12px' }}>
                        {formattedStartDate} - {formattedEndDate}
                      </span>
                    </>
                  </Box>
                  <Box sx={{ marginTop: '8px' }}>
                    <DateRangePicker selected={dateRange} onChange={handleDateChange} />
                  </Box>
                </Box>
              </Popover>
            </Box>
            {selected.length > 0 && (
              <Box
                sx={{
                  display: 'flex',
                  gap: '10px',
                  [theme.breakpoints.down('sm')]: {
                    paddingBottom: '8px',
                    paddingRight: '25px',
                    maxWidth: '340px',
                    overflow: 'auto',
                    '&::-webkit-scrollbar': {
                      display: 'none'
                    }
                  },
                  '@media screen and (max-width:400px)': {
                    maxWidth: '300px'
                  },
                  '@media screen and (max-width:360px)': {
                    maxWidth: '280px'
                  }
                }}
              >
                <Button size="small" sx={styles.btnClearAll} onClick={handleDeleteAll}>
                  Clear All
                </Button>
                {selected.map((selectedItem) => (
                  <Chip
                    key={selectedItem}
                    label={selectedItem}
                    size="small"
                    onDelete={() => {
                      handleDeleteFilter(selectedItem);
                    }}
                    sx={{ '& span': { fontSize: '10px' }, marginRight: '4px' }}
                  />
                ))}
              </Box>
            )}
          </Box>
        </Box>
      </Box>
    </Box>
  );
};

FilterBar.propTypes = {
  onDateChange: PropTypes.any,
  startDate: PropTypes.any,
  endDate: PropTypes.any,
  handleSelectDate: PropTypes.any,
  isSelectedDate: PropTypes.any,

  selectedTag: PropTypes.any,
  isSelectedTag: PropTypes.any,
  handleCheckboxTagChange: PropTypes.any,

  selectedLogistic: PropTypes.any,
  isSelectedLogistic: PropTypes.any,
  handleCheckboxLogisticChange: PropTypes.any,

  selectedStatus: PropTypes.any,
  isSelectedStatus: PropTypes.any,
  handleCheckboxStatusChange: PropTypes.any,

  handleDeleteFilter: PropTypes.any,
  handleDeleteAll: PropTypes.any,

  selected: PropTypes.any
};

export default FilterBar;