import { ReactDatePickerCustomHeaderProps } from 'react-datepicker';
import styled, { css } from 'styled-components';
import React from 'react';
import MonthOrYearPicker from './MonthOrYearPicker';
import Left from '../../../assets/icons/Leftarrow';
import Right from '../../../assets/icons/Rightarrow';

type Props = ReactDatePickerCustomHeaderProps;

function DatePickerHeader(props: Props) {
  return (
    <Container>
      <IconContainer
        onClick={props.decreaseMonth}
        $disabled={props.prevMonthButtonDisabled}
      >
        <Left />
      </IconContainer>
      <PickerContainer>
        <MonthOrYearPicker
          type={'month'}
          date={props.date}
          onSelect={(newMonthIndex: number) => props.changeMonth(newMonthIndex)}
        />
        <MonthOrYearPicker
          type={'year'}
          date={props.date}
          onSelect={(newYear: number) => props.changeYear(newYear)}
        />
      </PickerContainer>
      <Wrapper $disabled={props.nextMonthButtonDisabled}>
        <IconContainer
          onClick={props.increaseMonth}
          $disabled={props.nextMonthButtonDisabled}
        >
          <Right />
        </IconContainer>
      </Wrapper>
    </Container>
  );
}

const DisabledArrow = css`
  opacity: 0.3;
  pointer-events: none;
`;

const Wrapper = styled.div<{ $disabled: boolean }>`
  ${props => props.$disabled && 'cursor: not-allowed'};
`;

const IconContainer = styled.div<{ $disabled: boolean }>`
  ${props => props.$disabled && DisabledArrow};
`;

const PickerContainer = styled.div`
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 186px;
  max-width: 186px;
`;
const Container = styled.div`
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
`;

export default styled(DatePickerHeader)``;
