<template>
  <nb-container :style="{ backgroundColor: '#fff' }">
    <nb-header>
      <nb-left>
        <nb-button transparent :onPress="() => this.props.navigation.goBack()">
          <nb-icon name="arrow-back" />
        </nb-button>
      </nb-left>
      <nb-body :style="{ flex: 3 }">
        <nb-title>Custom Header</nb-title>
      </nb-body>
      <nb-right />
    </nb-header>
    <nb-content>
      <nb-form>
        <nb-picker
          mode="dropdown"
          :renderHeader="getPickerHeaderComp"
          :iosIcon="getIosIcon()"
          headerBackButtonText="Baaack!"
          :selectedValue="selected1"
          :onValueChange="onValueChange"
        >
          <item label="Wallet" value="key0" />
          <item label="ATM Card" value="key1" />
          <item label="Debit Card" value="key2" />
          <item label="Credit Card" value="key3" />
          <item label="Net Banking" value="key4" />
        </nb-picker>
      </nb-form>
    </nb-content>
  </nb-container>
</template>

<script>
import React from "react";
import {
  Picker,
  Icon,
  Header,
  Left,
  Button,
  Body,
  Title,
  Right
} from "native-base";

export default {
  components: { Item: Picker.Item },
  data() {
    return {
      selected1: "key1"
    };
  },
  methods: {
    onValueChange(value) {
      this.selected1 = value;
    },
    getIosIcon() {
      return <Icon name="ios-arrow-down" />;
    },
    getPickerHeaderComp(backAction) {
      return (
        <Header style={{ backgroundColor: "#f44242" }}>
          <Left>
            <Button transparent onPress={backAction}>
              <Icon name="arrow-back" style={{ color: "#fff" }} />
            </Button>
          </Left>
          <Body style={{ flex: 3 }}>
            <Title>Your Header</Title>
          </Body>
          <Right />
        </Header>
      );
    }
  }
};
</script>

<style>
.body-icon-color {
  color: #999;
}
</style>
