import React, { useCallback } from 'react';
import { SCategoryItem } from '../s-components/s-category-item';
import { SBox } from '../s-components/layout/s-box';
import { Icon } from './icon';
import { SText } from '../s-components/typography/s-text';
import { ToggleStyled } from './toggle-styled';
import { fp as _ } from '../utils/fp';
import { SLineLabel } from '../s-components/s-line-label';

export type TProps = {
  label: string;
  onPress?: () => void;
  renderText?: () => string;
  renderComponent?: () => JSX.Element;
  zIndex?: number;
  renderArrowNext?: boolean;
  disabled?: boolean;
  labelColor?: string;
  loading?: boolean;
};

export const Line: React.FC<TProps> = props => {
  const {
    label,
    onPress,
    renderText,
    renderComponent,
    zIndex,
    renderArrowNext,
    disabled,
    labelColor,
  } = props;

  const cssRules = {
    px: 16,
    zIndex,
  };

  const getBgColor = useCallback(
    (state: boolean) => {
      if (onPress === _.noop) {
        return 'ebonyClay';
      }
      return state ? 'mirage' : 'ebonyClay';
    },
    [onPress]
  );

  return (
    <ToggleStyled
      disabled={disabled}
      testID="profile-info-item-toggle"
      {...cssRules}
      onPress={onPress}
      tappedCss={{ opacity: 1, backgroundColor: getBgColor(!disabled) }}
      defaultCss={{ opacity: 1, backgroundColor: getBgColor(false) }}
    >
      <SCategoryItem>
        <SLineLabel color={disabled ? 'romanPurple' : labelColor}>
          {label}
        </SLineLabel>
        <SBox flexDirection="row" justifyContent="flex-end" alignItems="center">
          {renderText ? (
            <SBox width={180} alignSelf="center" pr="6">
              <SText
                numberOfLines={1}
                ellipsizeMode="tail"
                color={disabled ? 'romanPurple' : 'periwinkleGray'}
                textAlign="right"
              >
                {renderText()}
              </SText>
            </SBox>
          ) : null}
          {renderComponent ? (
            <SBox alignSelf="center" justifyContent="flex-end">
              {renderComponent()}
            </SBox>
          ) : null}
          {renderArrowNext ? (
            <Icon ml={3} name="ios-next" size={22} color="lavenderGray" />
          ) : null}
        </SBox>
      </SCategoryItem>
    </ToggleStyled>
  );
};

Line.defaultProps = {
  onPress: _.noop,
  disabled: false,
  labelColor: 'periwinkleGray',
};