/**
 * Copyright 2024 Phenix Real Time Solutions, Inc. Confidential and Proprietary. All Rights Reserved.
 */
import {faEllipsisV} from '@fortawesome/free-solid-svg-icons';
import {CellType, ColumnsType, DataRowType} from 'components/table';
import {ChannelIconMenu} from 'components/channel-icon-menu';
import {IconMenuPosition} from 'components/icon-menu/icon-menu';
import PublishingStateIndicator from 'components/indicator-component/publishing-state-indicator';
import {theme} from 'theme';

const ChannelPublishingStateIndicator = (row?: DataRowType) => <PublishingStateIndicator row={row} idKey="channelId" publishingStateKey="channelsPublishing" />;

export const columns: ColumnsType = {
  indicator: {
    title: '',
    hasBorder: false,
    width: 40,
    type: CellType.Component,
    renderCell: ChannelPublishingStateIndicator
  },
  name: {
    title: 'Channel Name',
    type: CellType.Link,
    textCell: {propName: 'name'},
    thStyle: {
      textAlign: 'left',
      paddingLeft: 16
    }
  },
  alias: {
    title: 'Alias',
    textCell: {propName: 'alias'}
  },
  channelId: {
    title: 'Channel Id',
    hideColumnAt: theme.screenSizes.desktop,
    textCell: {propName: 'channelId'}
  },
  streamKey: {
    title: 'Stream Key',
    hideColumnAt: theme.screenSizes.tablet,
    textCell: {propName: 'streamKey'}
  },
  created: {
    title: 'Created',
    hideColumnAt: theme.screenSizes.large,
    type: CellType.Date,
    textCell: {propName: 'created'}
  },
  dropdown: {
    title: '',
    hasBorder: false,
    width: 50,
    type: CellType.DropDown,
    dropdownCell: {
      Component: ChannelIconMenu,
      keys: ['channelId', 'name', 'alias'],
      componentProps: {
        icon: faEllipsisV,
        showTail: false,
        position: IconMenuPosition.Left
      }
    }
  }
};