import React, { PureComponent } from 'react';
import { TEntityVisibility, TIconName } from '../../common/types';
import { Touchable } from '../../common/components/touchable';
import { SButtonContainer } from '../s-components/s-button-container';
import { SRow } from '../../common/s-components/layout/s-row';
import { Icon } from '../../common/components/icon';
import { SH6 } from '../../common/s-components/typography/s-h6';

type TProps = {
  entity: TEntityVisibility;
  pressed: boolean;
  onPress: () => void;
  togglePress: (isPressed: boolean) => void;
  iconName: TIconName | undefined;
  text: string;
  width: number;
  mr: number;
};

export class VideoButton extends PureComponent<TProps> {
  render() {
    const {
      entity,
      pressed,
      onPress,
      togglePress,
      iconName,
      text,
      width,
      mr,
    } = this.props;
    const error = entity.error || entity.offline;

    return (
      <>
        {!entity.empty && !error && !entity.skeleton && (
          <Touchable onPress={onPress} togglePress={togglePress}>
            <SButtonContainer
              width={width}
              mr={mr}
              bg={pressed ? 'mischka' : 'white'}
            >
              <SRow alignItems="center">
                <Icon color="black" size={22} name={iconName} mr={6} />
                <SH6 color="black">{text}</SH6>
              </SRow>
            </SButtonContainer>
          </Touchable>
        )}
      </>
    );
  }
}