import React from 'react';
import { countries } from 'App/constants';
import { useStore } from 'App/mstore';
import { formatTimeOrDate } from 'App/date';
import { Avatar, TextEllipsis, Tooltip } from 'UI';
import cn from 'classnames';
import { capitalize } from 'App/utils';
import { observer } from 'mobx-react-lite';
import Session from 'Types/session';

interface Props {
  session: Session;
  className?: string;
  width?: number;
  height?: number;
}

const UserCard: React.FC<Props> = ({ session, className, width, height }) => {
  const { settingsStore } = useStore();
  const { timezone } = settingsStore.sessionSettings;

  const {
    userBrowser,
    userDevice,
    userCountry,
    userCity,
    userOs,
    startedAt,
    userNumericHash,
    userDisplayName,
  } = session;

  const avatarBgSize = '38px';

  return (
    <div
      className={cn('bg-white flex items-center w-full', className)}
      style={{ width, height }}
    >
      <div className="flex items-center">
        <Avatar
          iconSize="23"
          width={avatarBgSize}
          height={avatarBgSize}
          seed={userNumericHash}
        />
        <div className="ml-3 overflow-hidden leading-tight">
          <TextEllipsis noHint className="font-medium">
            {userDisplayName}
          </TextEllipsis>
          <div className="text-sm text-gray-500 flex items-center">
            <span style={{ whiteSpace: 'nowrap' }}>
              <Tooltip
                title={`${formatTimeOrDate(startedAt, timezone, true)} ${timezone.label}`}
                className="w-fit !block"
              >
                {formatTimeOrDate(startedAt, timezone)}
              </Tooltip>
            </span>
            <span className="mx-1 font-bold text-xl">&#183;</span>
            {userCity && <span className="mr-1">{userCity},</span>}
            <span>{countries[userCountry]}</span>
            <span className="mx-1 font-bold text-xl">&#183;</span>
            <span>
              {userBrowser && `${capitalize(userBrowser)}, `}
              {`${/ios/i.test(userOs) ? 'iOS' : capitalize(userOs)}, `}
              {capitalize(userDevice)}
            </span>
          </div>
        </div>
      </div>
    </div>
  );
};

export default observer(UserCard);