import { connect } from 'react-redux';
import cn from 'classnames';
import { 
  Link,
  Icon,
  OsIcon,
  BrowserIcon,
  CountryFlag,
  Avatar,
  TextEllipsis
} from 'UI';
import { deviceTypeIcon } from 'App/iconNames';
import { toggleFavorite } from 'Duck/sessions';
import { session as sessionRoute } from 'App/routes';
import { durationFormatted, formatTimeOrDate } from 'App/date';
import stl from './sessionItem.css';

const Label = ({ label = '', color = 'color-gray-medium'}) => (
  <div className={ cn('font-light text-sm', color)}>{label}</div>
)
@connect(state => ({
  timezone: state.getIn(['sessions', 'timezone'])
}), { toggleFavorite })
export default class SessionItem extends React.PureComponent {
  state = { favouriting: false };

  toggleFavorite = () => {
    this.setState({ favouriting: true });
    this.props.toggleFavorite(this.props.session).then(() => {
      this.setState({ favouriting: false });
    });
  }

  // eslint-disable-next-line complexity
  render() {
    const {
      session: {
        sessionId,
        userBrowser,
        userOs,
        userId,
        userAnonymousId,
        userDisplayName,
        userCountry,
        startedAt,
        duration,
        eventsCount,
        errorsCount,
        pagesCount,
        viewed,
        favorite,
        userDeviceType,
        userUuid,
        userNumericHash,        
      },
      timezone,
      onUserClick,
      hasUserFilter = false,
      disableUser = false
    } = this.props;
    const formattedDuration = durationFormatted(duration);
    const hasUserId = userId || userAnonymousId;

    return (
      <div className={ stl.sessionItem } id="session-item" >
        <div className={ cn('flex items-center mr-auto')}>
          <div className="flex items-center mr-6" style={{ width: '200px' }}>
            <Avatar seed={ userNumericHash } />
            <div className="flex flex-col ml-3 overflow-hidden">
              <div
                className={cn({'color-teal cursor-pointer': !disableUser && hasUserId, 'color-gray-medium' : disableUser || !hasUserId})}
                onClick={() => (!disableUser && !hasUserFilter && hasUserId) && onUserClick(userId, userAnonymousId)}
              >
                <TextEllipsis text={ userDisplayName } noHint />
              </div>
              <Label label={ formatTimeOrDate(startedAt, timezone) } />
            </div>
          </div>
          <div className={ cn(stl.iconStack, 'flex-1') }>
            <div className={ stl.icons }>
              <CountryFlag country={ userCountry } className="mr-6" />
              <BrowserIcon browser={ userBrowser } size="16" className="mr-6" />
              <OsIcon os={ userOs } size="16" className="mr-6" />
              <Icon name={ deviceTypeIcon(userDeviceType) } size="16" className="mr-6" />
            </div>
          </div>
          <div className="flex flex-col items-center px-4" style={{ width: '150px'}}>
            <div className="text-xl">{ formattedDuration }</div>
            <Label label="Duration" />
          </div>

          <div className="flex flex-col items-center px-4">
            <div className={ stl.count }>{ eventsCount }</div>
            <Label label={ eventsCount === 0 || eventsCount > 1 ? 'Events' : 'Event' } />
          </div>

        </div>

        <div className="flex items-center">
          <div className="flex flex-col items-center px-4">
            <div className={ cn(stl.count, { "color-gray-medium": errorsCount === 0 }) } >{ errorsCount }</div>
            <Label label="Errors" color={errorsCount > 0 ? '' : 'color-gray-medium'} />
          </div>

          <div className={ cn(stl.iconDetails, 'px-4') }>
            <div
              className={ stl.favoriteWrapper }
              onClick={ this.toggleFavorite }
              data-favourite={ favorite }
            >
              <Icon name={ favorite ? 'star-solid' : 'star' } size="20" />
            </div>
          </div>
          
          <div className={ stl.playLink } id="play-button" data-viewed={ viewed }>
            <Link to={ sessionRoute(sessionId) }>
              <Icon name={ viewed ? 'play-fill' : 'play-circle-light' } size="30" color="teal" />
            </Link>
          </div>
        </div>
      </div>
    );
  }
}