import React, { useEffect, useState } from 'react';
import { SText } from '../../common/s-components/typography/s-text';
import { TFilterConfig } from '../types';
import { SBox } from '../../common/s-components/layout/s-box';
import { SPopupSelectorTitle } from '../../common/s-components/popup-selector/s-popup-selector-title';
import { SInfoTitle } from '../../common/s-components/s-info-title';
import { togglePopup } from '../../common/utils/swipeable-popup-service';
import { SRangeButtonContainer } from '../../market/s-components/s-range-button-container';
import { NSelect, TVendor } from '../../common/types';
import { OwnerInfo } from './owner-info';
import { InfoSorting } from './info-sorting';
import { PlaylistMarketInfo } from './playlist-market-info';
import { Touchable } from '../../common/components/touchable';

type TProps = {
  market?: string;
  sortingOptions: NSelect.TOption[];
  categoryOptions: NSelect.TOption[];
  onSubmit: (params: TFilterConfig) => void;
  id: string;
  config: TFilterConfig;
  vendor: TVendor;
};

export const InfoPlaylists = (props: TProps) => {
  const {
    sortingOptions,
    onSubmit,
    categoryOptions,
    market,
    id,
    config,
    vendor,
  } = props;
  const { order_by, category_id } = config;
  const [sorting, setSorting] = useState(order_by);
  const [category, setCategory] = useState(category_id);
  const [pressed, setPressed] = useState(false);
  const btnColor = pressed ? 'malibu2' : 'azureRadiance';

  useEffect(() => {
    setSorting(order_by);
  }, [order_by]);

  useEffect(() => {
    setCategory(category_id);
  }, [category_id]);

  return (
    <SBox px={16} pb={14} pt={3}>
      <SPopupSelectorTitle>
        <SInfoTitle mt={8}>Filtering & Sorting</SInfoTitle>
        <Touchable
          testID="popup-selector"
          // TODO: check property activeOpacity
          // @ts-ignore
          activeOpacity={1}
          onPress={() => {
            onSubmit({
              order_by: sorting,
              category_id: category,
            });
            togglePopup(id);
          }}
          onPressIn={() => {
            setPressed(true);
          }}
          onPressOut={() => {
            setPressed(false);
          }}
        >
          <SRangeButtonContainer>
            <SText semibold color={btnColor}>
              Done
            </SText>
          </SRangeButtonContainer>
        </Touchable>
      </SPopupSelectorTitle>
      <>
        <PlaylistMarketInfo marketCode={market} />
        {vendor !== 'amazon' ? (
          <OwnerInfo
            categories={categoryOptions}
            value={category}
            setValue={setCategory}
          />
        ) : null}
        <InfoSorting
          sortingOptions={sortingOptions}
          value={sorting}
          setValue={setSorting}
        />
      </>
    </SBox>
  );
};

InfoPlaylists.defaultProps = {};