import React, { Component } from 'react';
import { Container, Header, Content, Text, Tab, TabHeading, Tabs, StyleProvider } from 'native-base';
import HeaderViewContainer from '../../../../components/star/header/headerViewContainer';
import { NavigationSwitchScreenProps } from 'react-navigation';
import scrollCards from '../../../../Database/star';
import NetflixCards from '../../../../components/star/netflixCards/netflixCards';
import styles from './netflixStyles';
import NetflixHomeView from '../../../../components/star/netflixCards/netflixHomeView';
import getTheme from '../../../../../native-base-theme/components';
import material from '../../../../../native-base-theme/variables/materialStar';

interface NetflixMainProp extends NavigationSwitchScreenProps {
    navigation: any;
    netflixCards: Array<any>;
    goForBreaking: (key: string, routeName: string, params: any) => void;
}
class NetflixMain extends React.Component<NetflixMainProp> {
    constructor(props: NetflixMainProp) {
        super(props);
        this.state = {};
    }
    toggleDrawer = () => {
        this.props.navigation.toggleDrawer();
    }
    goForBreaking = () => {
        this.props.navigation.navigate({ key: 'MyScreen1', routeName: 'Detail', params: { image: 0, name: 'Breaking Bad' } });
    }
    goForNarcos = () => {
        this.props.navigation.navigate({ key: 'MyScreen1', routeName: 'Detail', params: { image: 1, name: 'Narcos' } });
    }
    goForThings = () => {
        this.props.navigation.navigate({ key: 'MyScreen1', routeName: 'Detail', params: { image: 2, name: 'Stranger Things' } });
    }
    render() {
        const stories = require('../../../../assets/star/1.jpg');
        const series = require('../../../../assets/star/wonder.jpg');
        const list = require('../../../../assets/star/exorcist.jpg');
        return (
            <Container style={styles.container}>
                <HeaderViewContainer
                    hasTabs={true}
                    leftIcon={'menu'}
                    leftPress={this.toggleDrawer}
                    headerTitle={'Netflix'}
                />
                <StyleProvider style={getTheme(material)}>
                    <Tabs locked={true}>
                        <Tab heading={<TabHeading style={styles.tabStyle}><Text style={styles.tabText}>STORIES</Text></TabHeading>}>
                            <Content>
                                <NetflixHomeView
                                    imageText={'Watch Wonder Woman'}
                                    headImage={stories}
                                />
                                <NetflixCards
                                    netflixCards={scrollCards.netflixMovies}
                                    goForBreaking={this.goForBreaking}

                                />
                            </Content>
                        </Tab>
                        <Tab activeTextStyle={styles.activeTextStyle} heading={<TabHeading style={styles.tabStyle}><Text style={styles.tabText}>MOVIES</Text></TabHeading>}>
                            <Content>
                                <NetflixHomeView
                                    imageText={'Watch Wonder Woman'}
                                    headImage={series}

                                />
                                <NetflixCards
                                    netflixCards={scrollCards.netflixSeries}
                                    goForBreaking={this.goForNarcos}

                                />
                            </Content>
                        </Tab>
                        <Tab heading={<TabHeading style={styles.tabStyle}><Text style={styles.tabText}>MY LIST</Text></TabHeading>}>
                            <Content>
                                <NetflixHomeView
                                    imageText={'Watch Wonder Woman'}
                                    headImage={list}
                                />
                                <NetflixCards
                                    netflixCards={scrollCards.netflixMyList}
                                    goForBreaking={this.goForThings}
                                />
                            </Content>
                        </Tab>
                    </Tabs>
                </StyleProvider>
            </Container>

        );
    }
}

export default NetflixMain;
