import React from 'react';
import { Nilable } from 'tsdef';
import { SBox } from '../s-components/layout/s-box';
import { Button } from './button';
import { TCssRules } from '../types';
import { DatepickerButtonSkeleton } from './datepicker-button-skeleton';
import { getCustomRangeEntity } from '../transducers';
import { Pill } from './pill';

type TProps = TCssRules & {
  range: Nilable<number>;
  onInfoPress: (variant: string) => void;
  variant?: string;
  noIcon?: boolean;
  maxDate?: Nilable<string>;
  daterangePopupVariant: string;
};

export const DatepickerButton: React.FC<TProps> = props => {
  const {
    range,
    onInfoPress,
    noIcon,
    width,
    height,
    variant,
    maxDate,
    daterangePopupVariant,
  } = props;
  const dateRange = getCustomRangeEntity(range, maxDate);

  return (
    <SBox alignItems="center" justifyContent="center" position="relative">
      {range ? (
        variant === 'pill' ? (
          <Pill
            variant="primary"
            // testID="playlist-performance-kpi-market"
            marketCode="empty"
            label={dateRange.standard}
            onPress={() => {
              onInfoPress(daterangePopupVariant);
            }}
          />
        ) : (
          <Button
            testID="datepicker-range-button"
            iconName={noIcon ? null : 'calendar'}
            variant="white"
            width={width}
            height={height}
            onPress={() => {
              onInfoPress(daterangePopupVariant);
            }}
          >
            {dateRange.standard}
          </Button>
        )
      ) : (
        <DatepickerButtonSkeleton />
      )}
    </SBox>
  );
};

DatepickerButton.defaultProps = {
  variant: 'light',
  noIcon: false,
};