/**
 * 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';
import styles from './styles';
import cardData from '../../Database/data';

export interface PaymentMethodForm {
  cardNumber: string;
  cardType: 'visa' | 'master';
  expiryDate: string;
}

interface PaymentDetailsFormProps {
  onSave: (card: {
    cardNumber: string;
    cardType: string;
    expiryDate: string;
  }) => void;
}

interface PaymentDetailsFormState {
  cardType: string;
  cardNumber: string;
  cvv: string;
  expiryDate: string;
  zipCode: string;
}

class PaymentDetailsForm extends React.Component<any, PaymentDetailsFormState> {
  constructor(props: any) {
    super(props);
    this.state = {
      cardType: '',
      cardNumber: '',
      cvv: '',
      expiryDate: '',
      zipCode: '',
    };
  }

  onCardNumberChange = (cardNumber: string) => {
    cardNumber = this.addCardNumberSpacing(cardNumber);
    this.setState({ cardNumber });
  };
  onValueChange = (e: any) => e.preventDefault();

  onSelectChange = (cardType: any) => {
    this.setState({
      cardType,
    });
  };
  saveCard = () => {
    const { cardNumber, cardType, expiryDate } = this.state;
    this.props.onSave({ cardNumber, cardType, expiryDate });
  };
  onCvvChange = (cvv: string) => this.setState({ cvv });

  onDateChange = (expiryDate: string) => {
    expiryDate = this.addCardDateSpacing(expiryDate);
    this.setState({ expiryDate });
  };

  onZipChange = (zipCode: string) => this.setState({ zipCode });

  addCardNumberSpacing = (cardNumber: string) => {
    cardNumber = cardNumber
      .replace(/\W/gi, '')
      .replace(/(.{4})/g, '$1 ')
      .trim();

    if (cardNumber.length > 19) {
      return cardNumber.slice(0, 19);
    } else {
      return cardNumber;
    }
  };
  addCardDateSpacing = (expiry: string) => {
    expiry = expiry.replace(/\W/gi, '').replace(/\//g, '').trim();

    if (expiry.length > 4) {
      return expiry.slice(0, 4).replace(/(.{2})/, '$1/');
    } else {
      if (expiry.length < 3) return expiry;

      return expiry.replace(/(.{2})/, '$1/');
    }
  };

  render() {
    const { cardType, cardNumber, cvv, zipCode, expiryDate } = this.state;
    const credit = 'Credit/Debit Card Number';
    const label2 = 'Card Type';
    const label3 = 'Security Code(CVV)';
    const label4 = 'fontSize: 12';
    const textBilling = 'Billing Zip/Postal Code';
    const textBillingDesc =
      'The zip or postal code from the address registered for this card';
    const securePay = 'Secure Payment';
    const securePayDesc =
      'Trusted by over 500 million shoppers in 50 countries';
    return (
      <Card style={{ borderRadius: 0 }}>
        <View padder>
          <CardItem style={{ alignSelf: 'flex-end' }}>
            <Button bordered danger onPress={this.saveCard}>
              <Text>Save</Text>
            </Button>
          </CardItem>
          <Form>
            <View style={{ paddingBottom: 10 }}>
              <Label style={styles.labelStyle}>{credit}</Label>
              <CardItem style={styles.cardItemNoPaddingL}>
                <Item regular style={{ borderRadius: 5 }}>
                  <Input
                    keyboardType="number-pad"
                    placeholder={credit}
                    value={cardNumber}
                    onChange={this.onValueChange}
                    onChangeText={this.onCardNumberChange}
                    maxLength={19}
                  />
                </Item>
              </CardItem>
            </View>
            <View style={{ paddingBottom: 10 }}>
              <Label style={styles.labelStyle}>{label2}</Label>
              <CardItem style={styles.cardItemNoPaddingL}>
                <Item regular style={{ borderRadius: 5 }}>
                  <PickerComponent
                    jsonList={cardData.pickerCard}
                    onSelectChange={this.onSelectChange}
                    selectedValue={cardType}
                  />
                </Item>
              </CardItem>
            </View>
            <Grid>
              <Row>
                <Col>
                  <Label style={styles.labelStyle}>{label3}</Label>
                  <CardItem style={styles.cardItemNoPaddingL}>
                    <Item regular style={{ borderRadius: 5 }}>
                      <Input
                        keyboardType="number-pad"
                        secureTextEntry={true}
                        placeholder="CVV"
                        value={cvv}
                        caretHidden={true}
                        onChangeText={this.onCvvChange}
                        maxLength={3}
                      />
                    </Item>
                  </CardItem>
                </Col>
                <Col>
                  <Label style={styles.labelStyle}>{label4}</Label>
                  <CardItem style={styles.cardItemNoPaddingL}>
                    <Item regular style={{ borderRadius: 5 }}>
                      <Input
                        keyboardType="number-pad"
                        placeholder="MM/YY"
                        value={expiryDate}
                        onChangeText={this.onDateChange}
                        maxLength={5}
                      />
                    </Item>
                  </CardItem>
                </Col>
              </Row>

              <Row>
                <Col>
                  <CardItem style={styles.cardItemNoPaddingL}>
                    <Body>
                      <Text style={{ fontSize: 12 }}>{textBilling}</Text>
                      <Text note style={{ fontSize: 9 }}>
                        {textBillingDesc}
                      </Text>
                    </Body>
                  </CardItem>
                </Col>
                <Col>
                  <CardItem style={styles.cardItemNoPaddingL}>
                    <Item regular style={{ borderRadius: 5 }}>
                      <Input
                        keyboardType="number-pad"
                        returnKeyType="done"
                        placeholder="Zip/Postal Code"
                        value={zipCode}
                        onChangeText={this.onZipChange}
                        maxLength={6}
                      />
                    </Item>
                  </CardItem>
                </Col>
              </Row>
              <Row>
                <Col>
                  <CardItem style={styles.cardItemNoPaddingL}>
                    <Left>
                      <Icon name="lock" type="Ionicons" />
                      <Body>
                        <Text>{securePay}</Text>
                        <Text note>{securePayDesc}</Text>
                      </Body>
                    </Left>
                  </CardItem>
                </Col>
              </Row>
            </Grid>
          </Form>
        </View>
      </Card>
    );
  }
}
export default PaymentDetailsForm;
