import React, { Component } from 'react';
import { SafeAreaView, Dimensions, Image, FlatList, Alert } from 'react-native';
import TabStyle from '../style/tab_style';
import { Text, Container, Content, Footer, Icon, View, Card, CardItem } from 'native-base';
import { createMaterialTopTabNavigator } from 'react-navigation';
import moment from 'moment/min/moment-with-locales';
import gql from 'graphql-tag';
import { Query, Mutation } from 'react-apollo';
import IconBadge from 'react-native-icon-badge';

import color from '../style/color.json';
import i18n, { _setLocale } from '../languages/i18n';
import TaskComponent from '../component/TaskComponent';
import FullScreenLoading from '../component/FullScreenLoading';
import Comment from '../component/Comment';
import TextInputComponent from '../component/TextInput';
import { TokenContext } from '../MyApp';
import { checkValidToken } from '../util/GraphQLUtil';

let  paddingSize = 12;
let deadline;

let PROCESS_STEP_QUERY = gql`
query ProcessStep($processStepId: String!) {
    processStep(processStepId: $processStepId) {
      forms {
        id
        recipeStepForm {
          id
          name
          type
          required
          validation
        }
      }
    }
  }
`;

let PROCESS_AUDIT_QUERY = gql`
query ProcessAudit($processId: String!) {
    process(processId: $processId) {
        steps {
            forms {
              recipeStepForm {
                name
                type
              }
              data
            }
            assignee {
              account {
                name
              }
            }
            complete
            deadline
        }
    }
}
`;

let COMMENT_PROCESS_MUTATION = gql`
mutation CommentProcess($processId: String!, $input: CommentProcessInput!) {
    commentProcess(processId: $processId, input: $input) {
      id
    }
}
`;

let FETCH_COMMENT_QUERY = gql`
query FetchComment($processId: String!) {
    process(processId: $processId) {
    comments {
      processComments {
        id
        text
        type
        commenter {
          account {
            name
            photoUrl
          }
        }
        createdAt
      }
    }
  }
}
`;

let FIND_PROCESS_STEP_QUERY = gql`
query FindProcessStep($processId: String!) {
    process(processId: $processId) {
      steps {
        id
        assignee {
          id
        }
        deadline
        complete
      }
    }
}
`;

export default class TaskDetail extends Component {

    constructor(props) {
        super(props);
        this.state = {
            totalComments: this.props.navigation.getParam('totalComments'),
            processId : this.props.navigation.getParam('processId'),
            processStepId : this.props.navigation.getParam('processStepId'),
            title : this.props.navigation.getParam('title'),
            recipe : this.props.navigation.getParam('recipe'),
            img : this.props.navigation.getParam('img'),
            creatorName : this.props.navigation.getParam('creatorName'),
            createdAt : moment(this.props.navigation.getParam('createdAt')).format("D MMM"),
            deadline:null
        };
    }

    componentWillMount() {
        moment.locale(i18n.t('moment'));
    }

    render() {
        const { navigation } = this.props;
        // processId = navigation.getParam('processId');
        // processStepId = navigation.getParam('processStepId');
        // title = navigation.getParam('title');
        // recipe = navigation.getParam('recipe');
        // img = navigation.getParam('img');
        // creatorName = navigation.getParam('creatorName');
        // createdAt = moment(navigation.getParam('createdAt')).format("D MMM");

        if (this.state.processStepId) {
            deadline = moment(navigation.getParam('deadline')).format("D MMM");
        }

        let TabTaskDetail = createMaterialTopTabNavigator({
            'Detail': {
                navigationOptions: {
                    tabBarLabel: 'Task',
                },
                screen: ()=>
                (<Detail
                processId = {this.state.processId}
                processStepId={this.state.processStepId}
                title={this.state.title}
                recipe={this.state.recipe}
                img={this.state.img}
                creatorName={this.state.creatorName}
                createdAt={this.state.createdAt}
                deadline={this.state.deadline}
                >


                </Detail>) ,
            },
            Audit: {
                screen: ()=>
                (
                <AuditTab
                processId={this.state.processId}>

                </AuditTab>),
                navigationOptions: {
                    tabBarLabel: 'Audit'
                },
            },
            'Attachment': {
                navigationOptions: ({ screenProps }) => ({
                    tabBarLabel: ({ tintColor }) =>
                        <IconBadge
                            MainElement={
                                <View style={{
                                    width: 100,
                                    padding: 10,
                                    paddingBottom: 0,
                                    marginBottom: 10
                                }}>
                                    <Text style={{ marginBottom: 0, fontSize: 13, fontWeight: 'bold', color: tintColor }}>COMMENT</Text>
                                </View>
                            }
                            BadgeElement={
                                <Text style={{ color: 'white', fontSize: 15 }}>{this.state.totalComments}</Text>
                            }
                            IconBadgeStyle={{
                                width: 20,
                                height: 20,
                                backgroundColor: '#026aa7'
                            }}
                            Hidden={!this.state.totalComments}
                        />
                }),
                screen: ()=>(
                <CommentTab
                processId={this.props.processId}>

                </CommentTab>)
            }
        }, TabStyle);

        return (
            <SafeAreaView flex={1}>
                <View style={{ backgroundColor: '#f5f5f5', paddingBottom: 0, padding: 16 }}>
                    <Text style={{ color: '#3e3f42', marginBottom: 5, fontWeight: 'bold', fontSize: 16 }}>{this.state.recipe}</Text>
                    <View style={{ flexDirection: 'row' }}>
                        <Image source={{ uri: this.state.img }}
                            style={{ height: paddingSize * 2, width: paddingSize * 2, borderRadius: paddingSize, paddingLeft: paddingSize }} />
                        <Text style={{ marginLeft: 5, color: '#3e3f42', marginTop: 5, fontSize: 14 }}>{this.state.creatorName || ''}</Text>
                    </View>
                    <View style={{ flexDirection: 'row', marginTop: 5, marginLeft: 2 }}>
                        <Icon name="ios-calendar" size={25} color='#3e3f42' />
                        <Text style={{ marginLeft: 5, color: '#3e3f42', marginTop: 3, fontSize: 14 }}>{this.state.createdAt}</Text>
                    </View>
                </View>
                <TabTaskDetail />
            </SafeAreaView>
        );
    }
}

class Detail extends Component {

    constructor(props){
        super(props)
        this.state={
            processStepId:this.props.processStepId,
            processId:this.props.processId,
            title :this.props.title,
            img:this.props.img,
            creatorName:this.props.creatorName,
            createdAt:this.props.createdAt,
            deadline:this.props.deadline
        }
    }


    render() {
        return (
            <Container>
                {this.state.processStepId
                    ? (this.state.processStepId == 'NO_PROCESS_STEP'
                        ? <View padder>
                            <View padder style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
                                <Icon name={'md-alert'} />
                                <Text style={{ textAlign: 'center' }}>{i18n.t('noTaskAvailable')}</Text>
                            </View>
                        </View>
                        : <Query query={PROCESS_STEP_QUERY} variables={{ "processStepId":this.state.processStepId }}>
                            {({ data, networkStatus, error }) => {
                                if (networkStatus === 1) {
                                    return (
                                        <FullScreenLoading />
                                    );
                                }

                                if (error) {
                                    if (checkValidToken(error)) {
                                        Alert.alert(
                                            i18n.t('dataFetchFailed'),
                                            i18n.t(error.networkError ? 'connectionError' : 'serverError'),
                                            [
                                                { text: 'OK', style: 'cancel' },
                                            ],
                                            { cancelable: false }
                                        );
                                    }
                                    return null;
                                }

                                return (
                                    <Content padder>
                                        <Text style={{ marginBottom: 5, fontWeight: 'bold' }}>{this.state.title}</Text>
                                        <View style={{ flexDirection: 'row' }}>
                                            <Image source={{ uri: this.state.img }}
                                                style={{ height: paddingSize * 2, width: paddingSize * 2, borderRadius: paddingSize, paddingLeft: paddingSize }} />
                                            <Text style={{ marginLeft: 5, marginTop: 5, fontSize: 14 }}>{this.state.creatorName}</Text>
                                        </View>
                                        <View style={{ flexDirection: 'row', marginTop: 5, marginLeft: 2 }}>
                                            <Icon name="ios-calendar" size={25} />
                                            <Text style={{ marginLeft: 5, marginTop: 8, fontSize: 14 }}>{this.state.deadline}</Text>
                                        </View>
                                        <Text style={{ marginTop: 5 }}>{`Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.`}</Text>
                                        <TaskComponent processStepId={this.state.processStepId} step={data.processStep} />
                                    </Content>
                                );
                            }}
                        </Query>
                    ) : <TokenContext.Consumer>
                        {(context) => (
                            <Query query={FIND_PROCESS_STEP_QUERY} variables={{ "processId": this.state.processId }}>
                                {({ data, error }) => {

                                    if (error) {
                                        if (checkValidToken(error)) {
                                            Alert.alert(
                                                i18n.t('dataFetchFailed'),
                                                i18n.t(error.networkError ? 'connectionError' : 'serverError'),
                                                [
                                                    { text: 'OK', style: 'cancel' },
                                                ],
                                                { cancelable: false }
                                            );
                                        }
                                        return null;
                                    }

                                    if (data.process) {

                                        let userData = context.userLoginResponse.data;
                                        let currentOrg = userData.account.organizationMembers.find((org) => org.organization.code == context.selectedOrg);
                                        let myProcessStep = data.process.steps.find((element) => element.assignee.id == currentOrg.id && !element.complete);

                                        if (myProcessStep) {
                                            this.state.deadline = moment(myProcessStep.deadline).format("D MMM");
                                            this.state.processStepId = myProcessStep.id;
                                        } else {
                                            this.state.processStepId = 'NO_PROCESS_STEP';
                                        }
                                        this.forceUpdate();
                                    }
                                    return (
                                        <FullScreenLoading />
                                    );
                                }}
                            </Query>
                        )}
                    </TokenContext.Consumer>
                }
            </Container>
        );
    }
}

class AuditTab extends Component {

    constructor(props) {
        super(props);
        this.state = {
            expandedList: [],
            processId:this.props.processId
        }
    }

    componentWillMount() {
        moment.locale(i18n.t('moment'));
    }

    render() {
        return (
            <Container>
                <Query query={PROCESS_AUDIT_QUERY} variables={{ "processId": this.state.processId }}>
                    {({ data, networkStatus, error, refetch }) => {
                        if (networkStatus === 1) {
                            return (
                                <FullScreenLoading />
                            );
                        }

                        if (error) {
                            if (checkValidToken(error)) {
                                Alert.alert(
                                    i18n.t('dataFetchFailed'),
                                    i18n.t(error.networkError ? 'connectionError' : 'serverError'),
                                    [
                                        { text: 'OK', style: 'cancel' },
                                    ],
                                    { cancelable: false }
                                );
                            }
                            data = {
                                process: {
                                    steps: []
                                }
                            };
                        }

                        return (
                            <FlatList data={data.process.steps.filter((item) => item.complete)}
                                refreshing={networkStatus === 4}
                                onRefresh={async () => {
                                    await refetch();
                                    this.setState({ expandedList: [] });
                                }}
                                keyExtractor={(item, index) => index.toString()}
                                ListEmptyComponent={() => (
                                    <View padder>
                                        <View padder style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
                                            <Icon name={'md-alert'} />
                                            <Text style={{ textAlign: 'center' }}>{i18n.t('noDataAvailable')}</Text>
                                        </View>
                                    </View>
                                )}
                                renderItem={({ item, index }) => {
                                    let { forms } = item;

                                    let time = new Date(item.deadline);
                                    let assigner = item.assignee.account.name;

                                    return (
                                        <Card>
                                            <CardItem button bordered onPress={() => {
                                                let newExpanded = this.state.expandedList.slice();
                                                newExpanded[index] = !newExpanded[index];
                                                this.setState({ expandedList: newExpanded });
                                            }}>
                                                <View style={{ flexDirection: 'row' }}>
                                                    <View style={{ backgroundColor: color.accent, height: 32, width: 32, borderRadius: 16, alignItems: 'center', justifyContent: 'center' }}>
                                                        <Text style={{ color: 'white', fontWeight: 'bold' }}>
                                                            {index + 1}
                                                        </Text>
                                                    </View>
                                                    <View style={{ paddingHorizontal: 10, flex: 1 }}>
                                                        <Text style={{ fontSize: 14 }}>{'Title'}</Text>
                                                        <View style={{ flexDirection: "row" }}>
                                                            <Text style={{ fontSize: 14, fontWeight: 'bold', paddingRight: 2 }}>{assigner}</Text>
                                                            <Text style={{ fontSize: 14 }}>{` • ${moment(time).format('ll')} ${moment(time).format('LT')}`}</Text>
                                                        </View>
                                                    </View>
                                                    <View style={{ alignItems: 'center', justifyContent: 'center' }}>
                                                        <View style={{ backgroundColor: '#b5b5b5' }}>
                                                            <Text style={{ fontSize: 12, padding: 4 }}>
                                                                {`${forms.length} data`}
                                                            </Text>
                                                        </View>
                                                    </View>
                                                </View>
                                            </CardItem>
                                            {this.state.expandedList[index] && <CardItem>
                                                <View>
                                                    {forms.map((formValue, valIndex) => {
                                                        return (
                                                            <View key={valIndex} style={{ paddingBottom: 8 }}>
                                                                <Text style={{ fontWeight: 'bold' }}>{formValue.recipeStepForm.name}</Text>
                                                                {(() => {
                                                                    switch (formValue.recipeStepForm.type) {
                                                                        case 'date':
                                                                            return (
                                                                                <Text>{`${moment(formValue.data.value).format('ll')}`}</Text>
                                                                            );
                                                                        case 'datetime':
                                                                            return (
                                                                                <Text>{`${moment(formValue.data.value).format('lll')}`}</Text>
                                                                            );
                                                                        default:
                                                                            return (
                                                                                <Text>{formValue.data.value}</Text>
                                                                            );
                                                                    }
                                                                })()}
                                                            </View>
                                                        );
                                                    })}
                                                </View>
                                            </CardItem>}
                                        </Card>
                                    );
                                }}
                            />
                        );
                    }}
                </Query>
            </Container>
        );
    }
}


class CommentTab extends Component {

    state = {
        refetch: undefined,
        processId:this.props.processId
    };

    render() {
        return (
            <Container>
                <Query query={FETCH_COMMENT_QUERY} variables={{ "processId": this.state.processId }}>
                    {({ data, networkStatus, error, refetch }) => {
                        if (networkStatus === 1) {
                            return (
                                <FullScreenLoading />
                            );
                        }

                        if (error) {
                            if (checkValidToken(error)) {
                                Alert.alert(
                                    i18n.t('dataFetchFailed'),
                                    i18n.t(error.networkError ? 'connectionError' : 'serverError'),
                                    [
                                        { text: 'OK', style: 'cancel' },
                                    ],
                                    { cancelable: false }
                                );
                            }
                            data = {
                                process: {
                                    comments: {
                                        processComments: []
                                    }
                                }
                            };
                        }

                        if (!this.state.refetch) {
                            this.setState({ refetch });
                        }

                        return (
                            <FlatList data={data.process.comments.processComments}
                                refreshing={networkStatus === 4}
                                onRefresh={refetch}
                                keyExtractor={(item) => item.id}
                                renderItem={({ item }) => (
                                    <Comment comment={item} />
                                )} />
                        );
                    }}
                </Query>
                <Footer>
                    <Mutation mutation={COMMENT_PROCESS_MUTATION}>
                        {(commentProcessStep, { data, error, networkStatus }) => (
                            <TextInputComponent
                                postFunction={commentProcessStep}
                                data={data} networkStatus={networkStatus} error={error}
                                variables={{
                                    "processId": this.state.processId
                                }}
                                refetch={this.state.refetch}
                            />
                        )}
                    </Mutation>
                </Footer>
            </Container>
        );
    }
}