import { TextOverflow } from 'react-basics';
import { useMessages, useSessionData } from 'components/hooks';
import Empty from 'components/common/Empty';
import { DATA_TYPES } from 'lib/constants';
import styles from './SessionData.module.css';
import { LoadingPanel } from 'components/common/LoadingPanel';

export function SessionData({ websiteId, sessionId }: { websiteId: string; sessionId: string }) {
  const { formatMessage, labels } = useMessages();
  const { data, ...query } = useSessionData(websiteId, sessionId);

  return (
    <LoadingPanel className={styles.data} {...query} data={data}>
      <div className={styles.header}>{formatMessage(labels.properties)}</div>
      {!data?.length && <Empty className={styles.empty} />}
      {data?.map(({ dataKey, dataType, stringValue }) => {
        return (
          <div key={dataKey}>
            <div className={styles.label}>
              <div className={styles.name}>
                <TextOverflow>{dataKey}</TextOverflow>
              </div>
              <div className={styles.type}>{DATA_TYPES[dataType]}</div>
            </div>
            <div className={styles.value}>{stringValue}</div>
          </div>
        );
      })}
    </LoadingPanel>
  );
}
