import React, { useMemo, useState } from 'react';
import { SText } from '../../common/s-components/typography/s-text';
import { SBox } from '../../common/s-components/layout/s-box';
import { SInfoTitle } from '../../common/s-components/s-info-title';
import { Touchable } from '../../common/components/touchable';
import { togglePopup } from '../../common/utils/swipeable-popup-service';
import { SPopupSelectorTitle } from '../../common/s-components/popup-selector/s-popup-selector-title';
import { theme } from '../../app/theme';
import { SH6 } from '../../common/s-components/typography/s-h6';
import { SFilterInfo } from '../../charts/s-components/s-filter-info';
import { PopupFilterOption } from './popup-filter-option';
import { fp as _ } from '../../common/utils/fp';
import { getFilterOptions } from '../transducers';
import { TGetAnyData } from '../types';
import { SButtonContainer } from '../s-components/s-button-container';

type TProps = {
  id: string;
  title: string;
  value?: string[];
  getAnyData: TGetAnyData;
};

export const PopupFilter: React.FC<TProps> = props => {
  const { id, title, value, getAnyData } = props;
  const [pressed, setPressed] = useState(false);
  const [selected, updateSelected] = useState(value);
  const options = useMemo(() => getFilterOptions(selected), [selected]);
  const isBtnDisabled = _.length(selected) === 0;
  const btnColor = isBtnDisabled
    ? 'columbiaBlue'
    : pressed
    ? 'malibu2'
    : 'azureRadiance';

  return (
    <SBox px={16} pb={12} pt={2}>
      <SPopupSelectorTitle>
        <SInfoTitle mt={8}>{title}</SInfoTitle>
        <Touchable
          testID="popup-filter"
          onPress={() => {
            if (isBtnDisabled) return;

            getAnyData(selected as string[]);
            togglePopup(id);
          }}
          onPressIn={() => {
            setPressed(true);
          }}
          onPressOut={() => {
            setPressed(false);
          }}
        >
          <SButtonContainer>
            <SText semibold color={btnColor}>
              Done
            </SText>
          </SButtonContainer>
        </Touchable>
      </SPopupSelectorTitle>
      <SFilterInfo
        borderColor={theme.colors.athensGray}
        paddingBottom={22}
        mb={0}
      >
        <SH6 color={theme.colors.romanPurple}>Playlist dsp</SH6>
      </SFilterInfo>
      <SBox>
        {options.map(item => (
          <PopupFilterOption
            key={item.value}
            {...item}
            onSelect={(value: string) => {
              if (!selected) {
                return updateSelected([value]);
              }

              if (_.includes(value, selected)) {
                updateSelected(selected.filter(v => v !== value));
              } else {
                updateSelected([...selected, value]);
              }
            }}
          />
        ))}
      </SBox>
    </SBox>
  );
};