import React, { useEffect, useState } from 'react';
import { PopupSelectorOption } from './popup-selector-option';
import { SBox } from '../../s-components/layout/s-box';
import { SPopupSelectorItem } from '../../s-components/popup-selector/s-popup-selector-item';
import { SH6 } from '../../s-components/typography/s-h6';
import { theme } from '../../../app/theme';
import { SInfoTitle } from '../../s-components/s-info-title';
import { SRangeButtonContainer } from '../../../market/s-components/s-range-button-container';
import { SText } from '../../s-components/typography/s-text';
import { SPopupSelectorTitle } from '../../s-components/popup-selector/s-popup-selector-title';
import { NSelect, TCssRules } from '../../types';
import { togglePopup } from '../../utils/swipeable-popup-service';
import { Touchable } from '../touchable';

type TProps = {
  options: NSelect.TOption[];
  optionsTitle?: string;
  value: NSelect.TValue;
  onSubmit: (value: NSelect.TValue) => void;
  title?: string | null;
  renderInfo?: () => any;
  id: string;
  renderLabelExtra?: (props: Record<string, any>) => React.ReactElement;
  optionsTitleRules?: TCssRules;
};

export const PopupSelector = (props: TProps) => {
  const {
    options,
    value: defaultValue,
    onSubmit,
    title,
    renderInfo,
    optionsTitle,
    id,
    renderLabelExtra,
    optionsTitleRules,
  } = props;
  const [value, setValue] = useState(defaultValue);
  const [pressed, setPressed] = useState(false);
  const btnColor = pressed ? 'malibu2' : 'azureRadiance';

  useEffect(() => {
    setValue(defaultValue);
  }, [defaultValue]);

  return (
    <SBox px={16} pb={12} pt={3}>
      <SPopupSelectorTitle>
        <SInfoTitle mt={8}>{title}</SInfoTitle>
        <Touchable
          testID="popup-selector"
          // TODO: check property activeOpacity
          // @ts-ignore
          activeOpacity={1}
          onPress={() => {
            onSubmit(value);
            togglePopup(id);
          }}
          onPressIn={() => {
            setPressed(true);
          }}
          onPressOut={() => {
            setPressed(false);
          }}
        >
          <SRangeButtonContainer>
            <SText semibold color={btnColor}>
              Done
            </SText>
          </SRangeButtonContainer>
        </Touchable>
      </SPopupSelectorTitle>
      {renderInfo ? renderInfo() : null}
      {optionsTitle ? (
        <SPopupSelectorItem pb={22} pt={0} {...optionsTitleRules}>
          <SH6 color={theme.colors.romanPurple}>{optionsTitle}</SH6>
        </SPopupSelectorItem>
      ) : null}
      <SBox mt={0}>
        {options.map(({ value: itemValue, label, ...rest }) => (
          <PopupSelectorOption
            key={itemValue}
            label={label}
            value={itemValue}
            selected={value === itemValue}
            onSelect={setValue}
            renderLabelExtra={renderLabelExtra}
            extraProps={rest}
          />
        ))}
      </SBox>
    </SBox>
  );
};

PopupSelector.defaultProps = {
  title: null,
  renderInfo: undefined,
};

//<SBox justifyContent="center" flexDirection="row" mb={-11}>