import React from 'react';
import PropTypes from 'prop-types';
import { InfoOutlined, SearchRounded } from '@mui/icons-material';

import { FILTERS, FILTERS_SELF_SERVE, STATUS_FILTERS } from '../../../common/constants';

import DateSelect from '@/modules/marketplace/common/DateSelect';
import { FormControl, IconButton, InputAdornment, MenuItem, Select, TextField, Tooltip } from '@/mui/components';
import { CustomCsvFilled } from '@/mui/components/CustomIcon';

import styles from './Filters.module.scss';

function Filters(props) {
  return (
    <div className={styles.Filters}>
      {!props.isAdminMP && (
        <Tooltip title="Note: The data shown here is updated in real time and intended for monitoring purposes only. Final billing calculations are based exclusively on the numbers available in the Analytics section.">
          <InfoOutlined fontSize="small" htmlColor="info.main" />
        </Tooltip>
      )}

      <Tooltip title="Download CSV" placement="top">
        <IconButton className={styles.FileButton} onClick={props.downloadCSV} size="small">
          <CustomCsvFilled fontSize="large" />
        </IconButton>
      </Tooltip>
      <FormControl variant="outlined" size="small">
        <TextField
          id="search"
          value={props.search}
          onChange={(event) => {
            props.setSearch(event.target.value);
          }}
          placeholder="Search"
          InputProps={{
            classes: {
              root: styles.Input,
            },
            endAdornment: (
              <InputAdornment position="end">
                <SearchRounded fontSize="medium" />
              </InputAdornment>
            ),
          }}
          variant="outlined"
          size="small"
        />
      </FormControl>

      <FormControl variant="outlined" size="small" className={styles.Status}>
        <Select
          variant="outlined"
          size="small"
          id="status-filter"
          value={props.filterByStatus}
          onChange={(event) => {
            props.setFilterByStatus(event.target.value);
          }}
          displayEmpty
          inputProps={{ 'aria-label': 'Without label' }}
        >
          <MenuItem value={null} disabled className={styles.DefaultSelectProp}>
            Filter By
          </MenuItem>
          {STATUS_FILTERS.map((item) => (
            <MenuItem key={item.value} value={item.value}>
              {item.label}
            </MenuItem>
          ))}
        </Select>
      </FormControl>

      <DateSelect
        filterDate={props.filterDate}
        setFilterDate={props.setFilterDate}
        options={props.isAdminMP ? FILTERS : FILTERS_SELF_SERVE}
        enableCustomPeriod
      />
    </div>
  );
}

Filters.propTypes = {
  filterDate: PropTypes.shape({}).isRequired,
  filterByStatus: PropTypes.string.isRequired,
  search: PropTypes.string.isRequired,
  setFilterDate: PropTypes.func.isRequired,
  setSearch: PropTypes.func.isRequired,
  setFilterByStatus: PropTypes.func.isRequired,
  downloadCSV: PropTypes.func.isRequired,
  isAdminMP: PropTypes.bool.isRequired,
};

export default Filters;
