import React from 'react';
import {
  createNativeStackNavigator,
  NativeStackScreenProps,
} from '@react-navigation/native-stack';
import {DraftPost} from '@modules/drafts/interfaces';
import {useTheme} from '@shared/theme';

import ScheduleScreen from '../screens/Schedule';
import SegmentationScreen from '../screens/Segmentation';
import CreatePollScreen from '../screens/CreatePoll';
import SelectedMediaScreen from '../screens/SelectedMedia';

export enum NewPostScreens {
  NewPostMain = 'NewPostMain',
  SchedulePost = 'SchedulePost',
  SegmentationPost = 'SegmentationPost',
  EditDraft = 'EditDraft',
  CreatePoll = 'CreatePoll',
  SelectedMedia = 'SelectedMedia',
}

export type NewPostStackParamList = {
  [NewPostScreens.NewPostMain]:
    | undefined
    | {groupId?: number; sharedPostId?: number; sharedGroupId?: number};
  [NewPostScreens.SchedulePost]: undefined;
  [NewPostScreens.SegmentationPost]: undefined;
  [NewPostScreens.EditDraft]: {mine: boolean; draft: DraftPost};
  [NewPostScreens.CreatePoll]: undefined;
  [NewPostScreens.SelectedMedia]: undefined;
};

export const NewPostStack = createNativeStackNavigator<NewPostStackParamList>();

interface NewPostNavigatorProps {
  children: React.ReactNode;
  initialRouteName?: keyof NewPostStackParamList;
}

const getSchedulePostOptions = ({
  navigation,
}: NativeStackScreenProps<
  NewPostStackParamList,
  NewPostScreens.SchedulePost
>) => ({
  headerRight: () => <ScheduleScreen.HeaderRight navigation={navigation} />,
  headerLeft: () => null,
  headerTitle: () => <ScheduleScreen.HeaderTitle />,
  headerTitleAlign: 'center' as const,
  headerBackVisible: false,
});

const getCreatePollOptions = ({
  navigation,
}: NativeStackScreenProps<
  NewPostStackParamList,
  NewPostScreens.CreatePoll
>) => ({
  headerRight: () => <CreatePollScreen.HeaderRight navigation={navigation} />,
  headerLeft: () => null,
  headerTitle: () => <CreatePollScreen.HeaderTitle />,
  headerTitleAlign: 'center' as const,
  headerBackVisible: false,
});

/* To use this navigator, you need to pass the component to be rendered as a prop */
/* Also, this has to be wrapped by a NewPost */
const NewPostNavigator = ({
  children,
  initialRouteName,
}: NewPostNavigatorProps) => {
  const {theme} = useTheme();
  // Header tokens have to be applied at runtime so the native stack header
  // honors dark theme on screens like SchedulePost and CreatePoll.
  const themedHeaderOptions = {
    headerStyle: {backgroundColor: theme.background.elements.default},
    headerTintColor: theme.text.neutral.default,
    contentStyle: {backgroundColor: theme.background.elements.grey},
  } as const;

  return (
    <NewPostStack.Navigator
      initialRouteName={initialRouteName}
      screenOptions={themedHeaderOptions}>
      {children}
      <NewPostStack.Screen
        name={NewPostScreens.SchedulePost}
        options={getSchedulePostOptions}
        component={ScheduleScreen}
      />
      <NewPostStack.Screen
        name={NewPostScreens.SegmentationPost}
        component={SegmentationScreen}
        options={{
          headerShown: false,
        }}
      />
      <NewPostStack.Screen
        name={NewPostScreens.CreatePoll}
        component={CreatePollScreen}
        options={getCreatePollOptions}
      />
      <NewPostStack.Screen
        name={NewPostScreens.SelectedMedia}
        component={SelectedMediaScreen}
        options={{
          headerShown: false,
        }}
      />
    </NewPostStack.Navigator>
  );
};

export default NewPostNavigator;
