import React from 'react';
import {
    Platform,
    requireNativeComponent,
    StyleProp,
    UIManager,
    ViewStyle,
} from 'react-native';

import type { BannerAdType } from './AdType';

interface NativeBannerViewProps {
    shouldLoadNow: boolean;
    placementId: string;
    shouldLoadWhenReady: boolean;
    preference: string | undefined;
    style: StyleProp<ViewStyle>;
    onAdLoaded?: Function;
    onAdFailedToLoad?: Function;
    onAdRefreshed?: Function;
    onAdFailedToRefresh?: Function;
    onAdClicked?: Function;
    onAdLoadCalled?: Function;
}

interface BannerViewProps {
    shouldLoadNow: boolean;
    visible: boolean;
    type: BannerAdType;
    shouldLoadWhenReady: boolean;
    placementId: string;
    preference: string | undefined;
    onBannerAdLoaded?: Function;
    onBannerAdFailedToLoad?: Function;
    onBannerAdRefreshed?: Function;
    onBannerAdFailedToRefresh?: Function;
    onBannerAdClicked?: Function;
    onBannerAdLoadCalled?: Function;
}

const sizeForType: Record<BannerAdType, { width: number; height: number }> = {
    standard: { width: 320, height: 50 },
    large: { width: 320, height: 100 },
    full: { width: 468, height: 60 },
    mediumRectangle: { width: 300, height: 250 },
    leaderboard: { width: 728, height: 90 },
    dynamic: { width: -1, height: 50 },
    dynamicLeaderboard: { width: -1, height: 90 },
};

const getSizeForType = (type: BannerAdType) => sizeForType[type];

const LINKING_ERROR =
    `The package 'react-native-bluestack--module' doesn't seem to be linked. Make sure: \n\n` +
    Platform.select({ ios: "- You have run 'pod install'\n", default: '' }) +
    '- You rebuilt the app after installing the package\n' +
    '- You are not using Expo managed workflow\n';

const ComponentName = 'BluestackModuleView';

export const BluestackModuleView =
    UIManager.getViewManagerConfig(ComponentName) != null
        ? requireNativeComponent<NativeBannerViewProps>(ComponentName)
        : () => {
              throw new Error(LINKING_ERROR);
          };

// export const BannerModuleView = (props: BannerViewProps) => {
export const BannerModuleView: React.FC<BannerViewProps> = (props) => {
    const {
        onBannerAdLoaded,
        onBannerAdFailedToLoad,
        onBannerAdRefreshed,
        onBannerAdFailedToRefresh,
        onBannerAdClicked,
        onBannerAdLoadCalled,
        type,
        visible,
        ...restProps
    } = props;
    const size = getSizeForType(type);

    return (
        <BluestackModuleView
            {...restProps}
            style={[
                { width: size.width, height: size.height },
                !visible && { display: 'none' },
            ]}
            onAdLoaded={onBannerAdLoaded}
            onAdFailedToLoad={onBannerAdFailedToLoad}
            onAdRefreshed={onBannerAdRefreshed}
            onAdFailedToRefresh={onBannerAdFailedToRefresh}
            onAdClicked={onBannerAdClicked}
            onAdLoadCalled={onBannerAdLoadCalled}
        />
    );
};