import React from 'react';
import PropTypes from 'prop-types';
import { useDispatch } from 'react-redux';
import {
  DesktopWindowsRounded,
  PhoneIphoneRounded,
  VisibilityOffRounded,
  VisibilityRounded,
} from '@mui/icons-material';

import { TYPE_ERROR } from '@/modules/@common/notify/constants';
import { INTERVAL_MAX, INTERVAL_MIN } from '@/modules/players/Editor/constants';

import { showNotificationAction } from '@/modules/layout/redux/slices';
import { setAction } from '@/modules/players/Editor/redux/slices';

import { DataGridPro, Stack } from '@/mui/components';

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

function IntervalsList({
  showDesktopIntervals = true,

  ...props
}) {
  const dispatch = useDispatch();
  const handleSetState = (state) => dispatch(setAction(state));

  const handleRowUpdate = (row) => {
    if (row.interval < INTERVAL_MIN || row.interval > INTERVAL_MAX) {
      dispatch(
        showNotificationAction({
          key: props.intervalsHeaderName + Date.now(),
          type: TYPE_ERROR,
          message: `${props.intervalsHeaderName}: accept only numbers between ${INTERVAL_MIN} to ${INTERVAL_MAX}`,
        }),
      );
      return undefined;
    }
    handleSetState({ [row.stateName]: Math.floor(row.interval) });
    // eslint-disable-next-line no-param-reassign
    row.interval = Math.floor(row.interval);
    return row;
  };
  const intervals = [
    showDesktopIntervals && {
      id: 0,
      device: 'desktop',
      viewability: 'inView',
      interval: props.desktopInViewInterval ?? INTERVAL_MIN,
      stateName: props.desktopInViewStateName,
    },
    showDesktopIntervals && {
      id: 1,
      device: 'desktop',
      viewability: 'notInView',
      interval: props.desktopNotInViewInterval ?? INTERVAL_MIN,
      stateName: props.desktopNotInViewStateName,
    },
    {
      id: 2,
      device: 'mobile',
      viewability: 'inView',
      interval: props.mobileInViewInterval ?? INTERVAL_MIN,
      stateName: props.mobileInViewStateName,
    },
    {
      id: 3,
      device: 'mobile',
      viewability: 'notInView',
      interval: props.mobileNotInViewInterval ?? INTERVAL_MIN,
      stateName: props.mobileNotInViewStateName,
    },
  ].filter(Boolean);

  return (
    <DataGridPro
      size="small"
      fullWidth
      disableRowSelectionOnClick
      hideFooter
      processRowUpdate={handleRowUpdate}
      columns={[
        {
          field: 'device',
          headerName: 'Device',
          width: 200,
          headerAlign: 'center',
          align: 'center',
          sortable: false,
          filterable: false,
          disableColumnMenu: true,
          renderCellValue: (params) => {
            const Icon = params.value === 'desktop' ? DesktopWindowsRounded : PhoneIphoneRounded;
            return (
              <Stack className={styles.IconWrapper}>
                <Icon fontSize="small" htmlColor="shades.0" />
              </Stack>
            );
          },
        },
        {
          field: 'viewability',
          headerName: 'Viewability',
          headerAlign: 'center',
          align: 'center',
          sortable: false,
          filterable: false,
          width: 200,
          disableColumnMenu: true,
          renderCellValue: (params) => {
            const Icon = params.value === 'inView' ? VisibilityRounded : VisibilityOffRounded;

            return (
              <Stack className={styles.IconWrapper}>
                <Icon fontSize="small" htmlColor="shades.0" />
              </Stack>
            );
          },
        },
        {
          field: 'interval',
          headerName: props.intervalsHeaderName ?? 'Intervals (ms)',
          headerAlign: 'center',
          align: 'center',
          sortable: false,
          filterable: false,
          cellType: 'number',
          width: 230,
          disableColumnMenu: true,
          editable: true,
        },
      ]}
      rows={intervals}
    />
  );
}

IntervalsList.propTypes = {
  showDesktopIntervals: PropTypes.bool,
  intervalsHeaderName: PropTypes.string.isRequired,
  desktopInViewInterval: PropTypes.number.isRequired,
  desktopNotInViewInterval: PropTypes.number.isRequired,
  mobileInViewInterval: PropTypes.number.isRequired,
  mobileNotInViewInterval: PropTypes.number.isRequired,
  desktopInViewStateName: PropTypes.string.isRequired,
  desktopNotInViewStateName: PropTypes.string.isRequired,
  mobileInViewStateName: PropTypes.string.isRequired,
  mobileNotInViewStateName: PropTypes.string.isRequired,
};

export default IntervalsList;
