import React, { useState } from 'react';
import { SRow } from '../../common/s-components/layout/s-row';
import { SBox } from '../../common/s-components/layout/s-box';
import { TEntityVisibility } from '../../common/types';
import { VideoButton } from './video-button';
import { Skeleton } from './skeleton';

type TProps = {
  onYoutubePress: () => void;
  onTiktokPress: () => void;
  youtubeVisibility: TEntityVisibility;
  tiktokVisibility: TEntityVisibility;
};

export const VideoData: React.FC<TProps> = ({
  onYoutubePress,
  onTiktokPress,
  youtubeVisibility,
  tiktokVisibility,
}) => {
  const [youtubePressed, setYoutubePressed] = useState(false);
  const [tiktokPressed, setTiktokPressed] = useState(false);
  const isLoading = youtubeVisibility.skeleton || tiktokVisibility.skeleton;

  if (isLoading) {
    return <Skeleton />;
  }

  return (
    <SBox px={16}>
      <SRow justifyContent="center">
        <VideoButton
          entity={tiktokVisibility}
          pressed={tiktokPressed}
          onPress={onTiktokPress}
          togglePress={setTiktokPressed}
          iconName="tiktok"
          text="tiktok"
          width={117}
          mr={youtubeVisibility.data ? 16 : 0}
        />
        <VideoButton
          entity={youtubeVisibility}
          pressed={youtubePressed}
          onPress={onYoutubePress}
          togglePress={setYoutubePressed}
          iconName="youtube"
          text="youtube"
          width={130}
          mr={0}
        />
      </SRow>
    </SBox>
  );
};