import React, { useContext } from 'react'
import NavigationLink from '../../../../core/components/navigation-link/NavigationLink';
import { ChannelIcon } from '../../../../components/aisera-icons/channel-icon/ChannelIcon';
import { IChannel } from '../../models';
import './channel.scss';
import { RequestContext } from '../../../../pages/request-details/Request.context';
import { Views } from '../../../../core/models/core.model';

const Channel = ({ channelId, channel_type_id, name }: IChannel) => {
  const { actions } = useContext(RequestContext);

  const handleChannelClick = () => {
    actions.handler({ type: 'ViewNavigation', data: { viewId: Views.ChannelDetails, data: { entityId: channelId } } });
  }

  return (
    <div className='channel-block'>
      <span className='channel-icon-renderer'><ChannelIcon type={channel_type_id.toString()} /></span>
      <NavigationLink text={name} handleClick={() => handleChannelClick()} />
    </div>
  )
}

export default Channel;