import React from 'react';
import PropTypes from 'prop-types';
import Button, {BUTTON_TYPE} from '@propellerads/button';

import DEFAULT_PRESET_PROPS from '../defaultProps';

import {Presets, PresetItem} from './style';

const DatePickerPreset = (props) => {
  const {
    preset,
    onClick,
    elementId,
    isSelected,
  } = props;

  return (
    <PresetItem isSelected={isSelected} title={preset.label}>
      <Button
        elementId={`${elementId}-preset-${preset.id}`}
        onClick={() => {
          if (isSelected) {
            return;
          }

          onClick(preset);
        }}
        type={BUTTON_TYPE.LINK}
      >
        {preset.label}
      </Button>
    </PresetItem>
  );
};

DatePickerPreset.propTypes = {
  preset: PropTypes.shape(DEFAULT_PRESET_PROPS).isRequired,
  onClick: PropTypes.func.isRequired,
  elementId: PropTypes.string.isRequired,
  isSelected: PropTypes.bool.isRequired,
};

const RenderDatePickerPreset = React.memo(DatePickerPreset, (prevProps, newProps) => (
  prevProps.isSelected !== newProps.isSelected
));

const DatePickerPresets = (props) => {
  const {
    presets,
    elementId,
    onPresetClickHandler,
    activePreset,
    isMobile,
    isOnTop,
  } = props;

  return (
    <Presets isMobile={isMobile} isOnTop={isOnTop}>
      {presets
        .filter((preset) => preset.isVisibleInList)
        .map((preset) => (
          <RenderDatePickerPreset
            key={preset.id}
            elementId={elementId}
            preset={preset}
            isSelected={activePreset.id === preset.id}
            onClick={onPresetClickHandler}
          />
        ))}
    </Presets>
  );
};

DatePickerPresets.propTypes = {
  presets: PropTypes.arrayOf(PropTypes.shape(DEFAULT_PRESET_PROPS)).isRequired,
  activePreset: PropTypes.shape(DEFAULT_PRESET_PROPS).isRequired,
  onPresetClickHandler: PropTypes.func.isRequired,
  elementId: PropTypes.string.isRequired,
  isMobile: PropTypes.bool.isRequired,
  isOnTop: PropTypes.bool.isRequired,
};

export default DatePickerPresets;