import React from 'react';
import AppHeader from './../components/Header'
import { Image } from 'react-native'
import { Container, Content, Button, Icon, View, Text, Left, Right } from 'native-base'
import { SERVICE_HOST } from '../ServiceUrl';

class MedicationDetailScreen extends React.Component {



    constructor(props) {
        super(props)
    }

    render() {

        const { navigation } = this.props;
        const { goBack } = navigation
        const { detailItem, fontStyle, titleFontStyle } = styles
        const medicationData = navigation.state.params.data

        return (
            <Container>
                <AppHeader
                    headerLeft={
                        <Button onPress={() => goBack()}>
                            <Icon name='arrow-back' />
                        </Button>
                    }
                    headerText={medicationData.regno}
                />
                <Content style={{ backgroundColor: 'white' }}>

                    <Image
                        style={{ flex: 1, height: 250 }}
                        source={{ uri: "http://202.28.49.67/" + medicationData.dimgpath }}
                        resizeMode="cover"
                    />

                    <View style={detailItem}>
                        <Left>
                            <Text style={titleFontStyle}>ชื่อสามัญทางยา</Text>
                        </Left>
                        <Right>
                            <Text style={fontStyle}>{medicationData.genericname + " " + medicationData.genericnameweight}</Text>
                        </Right>
                    </View>

                    <View style={detailItem}>
                        <Left>
                            <Text style={titleFontStyle}>ผู้ผลิต</Text>
                        </Left>
                        <Right>
                            <Text style={fontStyle}>{medicationData.manufacturername == "" ? "-" : medicationData.manufacturername}</Text>
                        </Right>
                    </View>

                    <View style={detailItem}>
                        <Left>
                            <Text style={titleFontStyle}>ผู้รับอณุญาต</Text>
                        </Left>
                        <Right>
                            <Text style={fontStyle}>{medicationData.licenseename}</Text>
                        </Right>
                    </View>

                    <View style={detailItem}>
                        <Left>
                            <Text style={titleFontStyle}>ผู้จำหน่าย</Text>
                        </Left>
                        <Right>
                            <Text style={fontStyle}>{medicationData.distributorname == "" ? "-" : medicationData.distributorname}</Text>
                        </Right>
                    </View>

                    <View style={detailItem}>
                        <Left>
                            <Text style={titleFontStyle}>รูปแบบผลิตภัณท์</Text>
                        </Left>
                        <Right>
                            <Text style={fontStyle}>{medicationData.dtypename}</Text>
                        </Right>
                    </View>

                    <View style={detailItem}>
                        <Left>
                            <Text style={titleFontStyle}>รูปร่าง</Text>
                        </Left>
                        <Right>
                            <Text style={fontStyle}>{medicationData.dshapename}</Text>
                        </Right>
                    </View>

                    <View style={detailItem}>
                        <Left>
                            <Text style={titleFontStyle}>ประเภทของยา</Text>
                        </Left>
                        <Right>
                            <Text style={fontStyle}>{medicationData.dgroupname}</Text>
                        </Right>
                    </View>

                    <View style={detailItem}>
                        <Left>
                            <Text style={titleFontStyle}>ประเภททะเบียนยา</Text>
                        </Left>
                        <Right>
                            <Text style={fontStyle}>{medicationData.drtypename}</Text>
                        </Right>
                    </View>

                    <View style={detailItem}>
                        <Left>
                            <Text style={titleFontStyle}>สถานะ</Text>
                        </Left>
                        <Right>
                            <Text style={fontStyle}>{medicationData.dstatusname}</Text>
                        </Right>
                    </View>
                </Content>
            </Container>
        )
    }
}

const styles = {
    detailItem: {
        padding: 10,
        height: 75,
        backgroundColor: 'white',
        borderBottomColor: '#EEEEEE',
        borderBottomWidth: 0.5
    },
    titleFontStyle: {
        fontWeight: 'bold',
        fontFamily: 'sans-serif-light',
        fontSize: 18
    },
    fontStyle: {
        fontFamily: 'sans-serif-light',
        fontSize: 18
    }
}

export default MedicationDetailScreen