/**
 * React Native Full App (https://store.enappd.com/product/react-native-full-app)
 *
 * Copyright © 2019-present Enappd. All rights reserved.
 *
 * This source code is licensed as per the terms found in the
 * LICENSE.md file in the root directory of this source tree.
 */
import React from 'react';
import {
  Text,
  Card,
  Left,
  Body,
  Button,
  View,
  Form,
  Item,
  Label,
  Input,
  CardItem,
  Grid,
  Row,
  Col,
  Icon,
} from 'native-base';
import PickerComponent from './picker';

interface PaymentDetailsFormProps {
  cardDetails: any;
  jsonList: any;
  selectedValue: any;
  buttonSize: any;
  buttonTextColor: any;
  onValueChange: (value: any) => void;
}

const PaymentDetailsForm = (props: PaymentDetailsFormProps) => {
  const {
    cardDetails,
    jsonList,
    selectedValue,
    buttonSize,
    buttonTextColor,
  } = props;
  const credit = 'Credit/Debit Card Number';
  const label2 = 'Card Type';
  const label3 = 'Security Code(CVV)';
  const label4 = 'Expiry Date';
  const textBilling = 'Billing Zip/Postal Code';
  const textBillingDesc =
    'The zip or postal code from the address registered for this card';
  const lock = 'lock';
  const ionicon = 'Ionicons';
  const securePay = 'Secure Payment';
  const securePayDesc = 'Trusted by over 500 million shoppers in 50 countries';
  return (
    <Card style={cardDetails}>
      <View padder>
        {/* <CardItem style={saveButton}> */}
        <Button full light style={buttonSize}>
          <Text style={buttonTextColor}>Save</Text>
        </Button>
        {/* </CardItem> */}
        <Form>
          <View>
            <Label>{credit}</Label>
            <CardItem>
              <Item regular>
                <Input placeholder={credit} />
              </Item>
            </CardItem>
          </View>
          <View>
            <Label>{label2}</Label>
            <CardItem>
              <Item regular>
                <PickerComponent
                  jsonList={jsonList}
                  onValueChange={($value: any) => props.onValueChange($value)}
                  selected={selectedValue}
                />
              </Item>
            </CardItem>
          </View>
          <Grid>
            <Row>
              <Col>
                <Label>{label3}</Label>
                <CardItem>
                  <Item regular>
                    <Input placeholder="CVV" />
                  </Item>
                </CardItem>
              </Col>
              <Col>
                <Label>{label4}</Label>
                <CardItem>
                  <Item regular>
                    <Input placeholder="MM/YY" />
                  </Item>
                </CardItem>
              </Col>
            </Row>

            <Row>
              <Col>
                <CardItem>
                  <Body>
                    <Text>{textBilling}</Text>
                    <Text note>{textBillingDesc}</Text>
                  </Body>
                </CardItem>
              </Col>
              <Col>
                <CardItem>
                  <Item regular>
                    <Input placeholder="Zip/Postal Code" />
                  </Item>
                </CardItem>
              </Col>
            </Row>
            <Row>
              <Col>
                <CardItem>
                  <Left>
                    <Icon name={lock} type={ionicon} />
                    <Body>
                      <Text>{securePay}</Text>
                      <Text note>{securePayDesc}</Text>
                    </Body>
                  </Left>
                </CardItem>
              </Col>
            </Row>
          </Grid>
        </Form>
      </View>
    </Card>
  );
};
export default PaymentDetailsForm;
