/** @jsxRuntime classic */
/** @jsx jsx */
import React from 'react';
import { Button, getIcon } from '../../index';
import { css, jsx, useTheme } from '@emotion/react';
import { DateInput } from '../../Input/DateInput';
import { IColors } from '../../../types/theme';
import { ECalendarMode, ECalendarView } from '../../../SACalendar/types';
import { ModeSelector } from './ModeSelector';
import { Checkbox } from '../../Checkbox';

const container = css`
  padding: 20px 20px 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  div {
    margin: 0;
  }
  .error-message {
    display: none;
  }
`;

const seperatorCss = (colors: IColors) => css`
  background: ${colors.bg_border_seperator};
  width: 1px;
  height: unset;
  display: block;
`;

interface IFilterLineProps {
  mode: ECalendarMode;
  setMode: (mode: ECalendarMode) => void;
  view: ECalendarView;
  setView: (view: ECalendarView) => void;
  setDate: (date: string) => void;

  infinite: boolean;
  setInfinite: (state: boolean) => void;
  partial: boolean;
  setPartial: (state: boolean) => void;
}

export const FilterLine = ({
  mode,
  setMode,
  view,
  setView,
  setDate,
  infinite,
  setInfinite,
  partial,
  setPartial,
}: IFilterLineProps) => {
  const colors = useTheme();

  return (
    <div css={container}>
      <div style={{ display: 'flex' }}>
        <ModeSelector mode={mode} setMode={setMode} />
        <div style={{ display: 'flex', marginLeft: '16px' }}>
          <Button theme="basic" sizer="S">
            {getIcon('back')}
          </Button>
          <DateInput
            rightIcon="calendar"
            sizer="S"
            setChange={(date) => setDate(String(date))}
          />
          <Button theme="basic" sizer="S">
            {getIcon('forward')}
          </Button>
        </div>
        <div
          css={{
            display: 'flex',
            alignItems: 'center',
            flexWrap: 'wrap',
            gap: 10,
            margin: '0 10px',
            label: {
              height: 24,
            },
          }}
        >
          <Checkbox
            label="Infinite scrolling"
            checked={infinite}
            setChecked={setInfinite}
          />
          <Checkbox
            label="Partial rendering"
            checked={partial}
            setChecked={setPartial}
          />
        </div>
      </div>
      <div style={{ display: 'flex' }}>
        <Button theme="basic" sizer="S">
          {getIcon('filters', 'r')}
          Filters
        </Button>
        <span css={seperatorCss(colors)} />
        {Object.values(ECalendarView).map((item) => (
          <Button
            key={item}
            theme={item === view ? 'secondary' : 'basic'}
            sizer="S"
            onClick={() => mode !== ECalendarMode.MONTHLY && setView(item)}
          >
            {getIcon(item)}
          </Button>
        ))}
      </div>
    </div>
  );
};