import React, { memo, useContext } from 'react';
import { SBox } from '../../../common/s-components/layout/s-box';
import { SH1 } from '../../../common/s-components/typography/s-h1';
import { SH4 } from '../../../common/s-components/typography/s-h4';
import { ContextVideoData, ContextVisibility } from '../../contexts';
import { fp as _ } from '../../../common/utils/fp';
import { Tag } from '../../../common/components/tag';
import { TEntityWithData } from '../../types';
import { Skeleton } from './skeleton';

type TProps = {};

export const Slide1: React.FC<TProps> = memo(() => {
  const { data } = useContext(ContextVideoData) as TEntityWithData;
  const { visibility } = useContext(ContextVisibility);
  const title = _.path('data.title', data);
  const account = _.path('data.account', data);
  const source = _.path('data.source', data);

  return (
    <SBox alignItems="center" pt={44}>
      {visibility.skeleton ? <Skeleton /> : null}
      {visibility.data ? (
        <>
          <SBox px={16} mb={14}>
            <SH1 numberOfLines={1}>{title || 'N/A'}</SH1>
          </SBox>
          <SBox px={16} mb={24}>
            <SH4 numberOfLines={1} medium>
              By {account || 'N/A'}
            </SH4>
          </SBox>
          <Tag label={source} />
        </>
      ) : null}
    </SBox>
  );
});