import React from 'react';
import { SBox } from '../../common/s-components/layout/s-box';
import { PopupSelectorOption } from '../../common/components/popup-selector/popup-selector-option';
import { SPopupSelectorItem } from '../../common/s-components/popup-selector/s-popup-selector-item';
import { SH6 } from '../../common/s-components/typography/s-h6';
import { theme } from '../../app/theme';
import { TSortingOption } from '../types';
import { fp as _ } from '../../common/utils/fp';
import { SRow } from '../../common/s-components/layout/s-row';
import { SSortingText } from '../s-components/s-sorting-text';

type TProps = {
  sortingOptions: TSortingOption[];
  value: string;
  setValue: (value: string) => void;
};

export const InfoSorting: React.FC<TProps> = props => {
  const { sortingOptions, value, setValue } = props;
  const hasOneOption = _.length(sortingOptions) === 1;
  return (
    <SBox mt={0} mb={hasOneOption ? -27 : -1}>
      <SRow justifyContent="space-between">
        <SPopupSelectorItem
          pb={22}
          width={hasOneOption ? 0.5 : 1}
          borderColor={
            hasOneOption ? theme.colors.transparent : theme.colors.athensGray
          }
        >
          <SH6 color={theme.colors.romanPurple}>sorting</SH6>
        </SPopupSelectorItem>
        {hasOneOption ? (
          <SSortingText color="richBlack" mt={7}>
            {sortingOptions[0].label}
          </SSortingText>
        ) : null}
      </SRow>
      {!hasOneOption &&
        sortingOptions.map(({ value: itemValue, label, ...rest }) => (
          <PopupSelectorOption
            key={itemValue}
            label={label}
            value={itemValue}
            selected={value === itemValue}
            onSelect={setValue}
            extraProps={rest}
          />
        ))}
    </SBox>
  );
};