import { callDirection } from '@ringcentral-integration/commons/enums/callDirections';
import {
  palette2,
  RcText,
  RcTypography,
  spacing,
  styled,
} from '@ringcentral/juno';
import clsx from 'clsx';
import type { FunctionComponent } from 'react';
import React from 'react';

import { CallHistoryActions } from '../CallHistoryActions';
import type { CallLog, CallLogMenu } from '../CallHistoryPanel.interface';
import { CallIcon } from '../CallIcon';

import styles from './styles.scss';

export type CallHistoryItemProps = {
  call: CallLog;
  actionMenu?: CallLogMenu;
  isWide?: boolean;
};

const Item = styled.div<{ isWide: boolean }>`
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  box-sizing: border-box;
  padding: ${({ isWide }) => (isWide ? spacing(3, 4) : spacing(3))};
  border-bottom: 1px solid ${palette2('neutral', 'l02')};
`;

export const CallHistoryItem: FunctionComponent<CallHistoryItemProps> = ({
  call,
  actionMenu,
  isWide = true,
}) => {
  const displayName =
    call.direction === callDirection.outbound ? call.toName : call.fromName;

  return (
    <Item isWide={isWide} data-sign="callHistoryItem">
      <div className={clsx([styles.left, !isWide && styles.classic])}>
        <CallIcon {...call} />
        <div className={clsx([styles.info, !isWide && styles.classic])}>
          <RcText
            variant="body1"
            noWrap
            color="neutral.f06"
            data-sign="matchedName"
            className={styles.name}
            title={displayName}
          >
            {displayName}
          </RcText>
          <RcTypography
            variant="caption1"
            color="neutral.f04"
            data-sign="callTime"
          >
            {call.callTime}
          </RcTypography>
        </div>
      </div>
      <div className={styles.right}>
        <CallHistoryActions actionMenu={actionMenu} isWide={isWide} />
      </div>
    </Item>
  );
};