import React from 'react';
import PropTypes from 'prop-types';

import { MenuItem, Select } from '@/mui/components';

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

function TierCell({ id = null, disabled = false, ...props }) {
  const handleChange = (e) => {
    props.onChange({ value: e.target.value, id });
  };

  return (
    <div
      className={styles.SelectWrap}
      onClick={(e) => {
        e.stopPropagation();
        e.preventDefault();
      }}
      aria-hidden="true"
    >
      <Select
        labelId="tier-select-label"
        id="tier-select"
        value={props.cell}
        variant="outlined"
        size="small"
        onChange={handleChange}
        onOpen={() => {
          if (props.stopRefreshInterval) {
            props.stopRefreshInterval();
          }
        }}
        onClose={() => {
          if (props.resetRefreshInterval) {
            props.resetRefreshInterval();
          }
        }}
        disabled={disabled}
      >
        {props.options.map((item) => (
          <MenuItem value={item.value} key={item.value}>
            {item.label}
          </MenuItem>
        ))}
      </Select>
    </div>
  );
}

TierCell.propTypes = {
  cell: PropTypes.string.isRequired,
  onChange: PropTypes.func.isRequired,
  id: PropTypes.string,
  stopRefreshInterval: PropTypes.func.isRequired,
  resetRefreshInterval: PropTypes.func.isRequired,
  disabled: PropTypes.bool,
  options: PropTypes.arrayOf(
    PropTypes.shape({
      label: PropTypes.string,
      value: PropTypes.number,
    }),
  ).isRequired,
};

export default TierCell;
