import React from 'react';
import PropTypes from 'prop-types';
import dayjs from 'dayjs';
import { TimerOutlined } from '@mui/icons-material';

import { CALENDAR_FILTER, CALENDAR_FILTER_VALUE } from '../../constants';

import { autoSuggestHighlight } from '@/mui/helpers';

import { Autocomplete, Checkbox, MenuItem, Select, TextField, Typography } from '@/mui/components';

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

function Filters(props) {
  const totalTime = props.sessions?.reduce((partialSum, session) => partialSum + session.duration, 0) ?? 0;

  const renderOption = (props$, option, { inputValue, selected }, checkboxes) => (
    <li {...props$} key={option.time}>
      {checkboxes && <Checkbox checked={selected} />}
      <div>
        <Typography variant="body2" color="text.primary" component="div">
          {autoSuggestHighlight(inputValue, option.label).map((part) => {
            const Tag = part.highlight ? 'b' : React.Fragment;

            return <Tag key={part.id}>{part.text}</Tag>;
          })}
        </Typography>
        <Typography variant="caption" color="text.secondary">
          {option.time}
        </Typography>
      </div>
    </li>
  );

  return (
    <div className={styles.Filters}>
      <Select
        className={styles.Date}
        size="small"
        value={props.calendar}
        renderValue={
          props.calendar === CALENDAR_FILTER_VALUE.custom &&
          props.calendarCustom?.dateStart &&
          props.calendarCustom?.dateEnd
            ? () =>
                `${dayjs(props.calendarCustom.dateStart).format('DD/MM')} - ${dayjs(props.calendarCustom.dateEnd).format('DD/MM')}`
            : false
        }
        data-id="date"
        variant="outlined"
        onChange={({ target }) => props.handleFilterSetCalendar(target.value)}
      >
        {CALENDAR_FILTER.map((origin) => (
          <MenuItem key={origin.value} value={origin.value} onClick={() => props.handleMenuItemClick(origin.value)}>
            {origin.label}
          </MenuItem>
        ))}
      </Select>

      <Autocomplete
        data-id="event"
        className={styles.Filter}
        size="small"
        renderOption={renderOption}
        options={props.eventsOptions}
        value={props.event}
        optionValueKey="label"
        checkboxes
        onChange={(event, newValue) => {
          props.handleEventChange(newValue);
        }}
        renderInput={(params) => (
          <TextField
            {...params}
            size="small"
            variant="outlined"
            label="Event"
            onChange={(e) => {
              props.handleEventInputChange(e.target.value);
            }}
          />
        )}
      />

      <Autocomplete
        data-id="sessions"
        className={styles.Filter}
        size="small"
        multiple
        limitTags={2}
        checkboxes
        renderOption={(props$, option, value) => renderOption(props$, option, value, true)}
        options={props.sessionsOptions}
        value={props.sessions}
        onChange={(event, newValue) => {
          props.handleSessionsChange(newValue);
        }}
        disabled={props.sessionsOptions?.length < 2}
        renderInput={(params) => <TextField {...params} label="Sessions" size="small" variant="outlined" />}
      />

      <div className={styles.Total}>
        <TimerOutlined fontSize="small" htmlColor="info.dark" className={styles.TimerIcon} />

        <Typography variant="caption" color="info.dark">
          {`${totalTime}min`}
        </Typography>
      </div>
    </div>
  );
}

Filters.propTypes = {
  calendar: PropTypes.oneOfType([PropTypes.string, PropTypes.shape({})]).isRequired,
  calendarCustom: PropTypes.shape({
    dateStart: PropTypes.string,
    dateEnd: PropTypes.string,
  }).isRequired,
  handleFilterSetCalendar: PropTypes.number.isRequired,
  handleMenuItemClick: PropTypes.number.isRequired,

  eventsOptions: PropTypes.arrayOf(
    PropTypes.shape({
      label: PropTypes.string.isRequired,
      value: PropTypes.number.isRequired,
      time: PropTypes.number.isRequired,
    }),
  ).isRequired,
  event: PropTypes.shape({
    label: PropTypes.string.isRequired,
    value: PropTypes.number.isRequired,
    time: PropTypes.number.isRequired,
  }).isRequired,
  handleEventChange: PropTypes.func.isRequired,
  handleEventInputChange: PropTypes.func.isRequired,

  sessionsOptions: PropTypes.arrayOf(
    PropTypes.shape({
      label: PropTypes.string.isRequired,
      value: PropTypes.number.isRequired,
      time: PropTypes.number.isRequired,
    }),
  ).isRequired,
  sessions: PropTypes.arrayOf(
    PropTypes.shape({
      label: PropTypes.string.isRequired,
      value: PropTypes.number.isRequired,
      time: PropTypes.number.isRequired,
    }),
  ).isRequired,
  handleSessionsChange: PropTypes.func.isRequired,
};

export default Filters;
