import {
  requireNativeComponent,
  ViewStyle,
} from 'react-native';

import React, {

} from 'react';

import {
  BlazeBaseGridWidgetViewProps,
  BlazeBaseVideosWidgetViewProps,
  BlazeBaseWidgetViewProps,
  BlazeSdkBaseWidgetViewProps
} from './BlazeBaseWidgetViewProps';

import {
  BlazeBaseWidgetView,
} from './BlazeBaseWidgetComponent';

export interface BlazeVideosGridViewProps
  extends BlazeBaseWidgetViewProps,
  BlazeBaseGridWidgetViewProps,
  BlazeBaseVideosWidgetViewProps {

}

interface BlazeSdkVideosGridViewNativeProps
  extends BlazeVideosGridViewProps,
  BlazeSdkBaseWidgetViewProps {

}

export const BLAZE_VIDEOS_GRID_COMPONENT = 'RTNBlazeVideosGridView';

export class BlazeVideosGridView extends BlazeBaseWidgetView<BlazeVideosGridViewProps> {

  protected getComponentName(): string {
    return BLAZE_VIDEOS_GRID_COMPONENT
  }

  render() {
    const { style } = this.props;
    const finalStyle: ViewStyle = this.props.isEmbeddedInScrollView
      ? {
        ...style,
        height: this.state.height
      }
      : (style ?? {});

    return (
      <VideosGridViewManager
        {...this.props}
        {...this.createBaseProps()}
        style={finalStyle}
        ref={(ref) => {
          if (ref) this.ref = ref;
        }}
      />
    );
  }
}

const VideosGridViewManager = requireNativeComponent<BlazeSdkVideosGridViewNativeProps>(
  BLAZE_VIDEOS_GRID_COMPONENT,
);