import React, {Component} from 'react';
import {View, ScrollView, Button} from 'react-native';
import t from 'tcomb-form-native';
import {_} from 'lodash';

import {
  FloatingInput,
  FloatingPicker,
  FloatingDatePicker,
} from '../../Components';

import styles from './FormStyle';
import moment from 'moment';
import 'moment/locale/id';

moment.locale('id');

const Form = t.form.Form;
const stylesheet = _.cloneDeep(t.form.Form.stylesheet);

stylesheet.fieldset = {
  flexDirection: 'row',
};

const Gender = t.enums({
  M: 'Laki-Laki',
  F: 'Perempuan',
});

const Relation = t.enums({
  DS: 'Diri Sendiri',
  SI: 'Suami Istri',
  A: 'Anak',
});

const PengajuanGroup1 = t.struct({
  PangajuanName: t.String,
});

const Tertangung1 = t.struct({
  TertanggungName: t.String,
});

const PengajuanGroup2 = t.struct({
  PengajuanBirthDate: t.Date,
  PengajuanJenisKelamin: Gender,
});

const tertanggungDatePicker = t.struct({
  tertanggungBirthDate: t.Date,
  tertanggungJenisKelamin: Gender,
});

const PengajuanGroup3 = t.struct({
  PengajuanRelation: Relation,
});

const optionsPengajuanGroup1 = () => ({
  fields: {
    PangajuanName: {
      template: FloatingInput,
      label: 'Nama',
    },
  },
});

const optionsTertanggung1 = () => ({
  fields: {
    TertanggungName: {
      template: FloatingInput,
      label: 'Nama Tertanggung',
    },
  },
});

const optionsPengajuanGroup2 = () => ({
  fields: {
    PengajuanBirthDate: {
      label: 'Tanggal Lahir',
      template: FloatingDatePicker,
    },
    PengajuanJenisKelamin: {
      label: 'Jenis Kelamin',
      template: FloatingPicker,
    },
  },
  stylesheet: stylesheet,
});

const optionsPengajuanGroup3 = () => ({
  fields: {
    PengajuanRelation: {
      label: 'Relation',
      template: FloatingPicker,
    },
  },
});

const optionsTertanggungDatePicker = () => ({
  fields: {
    tertanggungBirthDate: {
      label: 'Tanggal Lahir',
      template: FloatingDatePicker,
    },
    tertanggungJenisKelamin: {
      label: 'Jenis Kelamin',
      template: FloatingPicker,
    },
  },
  stylesheet: stylesheet,
});

export default class CostumerProfile extends Component {
  constructor(props) {
    super(props);
    this.state = {
      pengajuanGroup1Form: {
        PangajuanName: '',
      },
      pengajuanGroup2Form: {
        PengajuanBirthDate: '',
        PengajuanJenisKelamin: '',
      },
      pengajuanGroup3Form: {
        PengajuanRelation: '',
      },

      // tertanggung
      tertanggung1Form: {
        TertanggungName: '',
      },
      tertanggungDatePicker: {
        tertanggungBirthDate: '',
        tertanggungJenisKelamin: '',
      },
    };
  }

  onPengajuanGroup1Change = pengajuanGroup1Form => {
    // console.log('props group 1 ', pengajuanGroup1Form);
    this.setState({
      pengajuanGroup1Form,
    });
  };

  onPengajuanGroup2Change = pengajuanGroup2Form => {
    console.log('props group 2 ', pengajuanGroup2Form);
    this.setState({
      pengajuanGroup2Form,
    });
  };

  onPengajuanGroup3Change = pengajuanGroup3Form => {
    this.setState({
      pengajuanGroup3Form,
    });

    setTimeout(() => {
      var Fortertanggung1Form = {
        TertanggungName: this.state.pengajuanGroup1Form.PangajuanName,
      };
      var FortertanggungDatePicker = {
        tertanggungBirthDate: this.state.pengajuanGroup2Form.PengajuanBirthDate,
        tertanggungJenisKelamin: this.state.pengajuanGroup2Form
          .PengajuanJenisKelamin,
      };

      if (this.state.pengajuanGroup3Form.PengajuanRelation === 'DS') {
        this.setState({
          tertanggung1Form: Fortertanggung1Form,
        });
        this.setState({
          tertanggungDatePicker: FortertanggungDatePicker,
        });
        setTimeout(() => {
          console.log('edwh;jfh;wlfejh;wlj', this.state.tertanggungDatePicker);
        }, 1000);
      }
    }, 1500);
  };

  onTertanggungGroup4Change = tertanggung1Form => {
    // console.log('props group 4 ', tertanggung1Form);
    this.setState({
      tertanggung1Form,
    });
  };

  onTertanggungDatePickerChange = tertanggungDatePicker => {
    // console.log('props group 5 ', tertanggungDatePicker);
    this.setState({
      tertanggungDatePicker,
    });
  };

  render() {
    console.log(
      'this.state.tertanggungDatePicker',
      this.state.tertanggungDatePicker,
    );
    return (
      <ScrollView>
        <View style={styles.div}>
          <Form
            refs="form"
            type={PengajuanGroup1}
            options={optionsPengajuanGroup1}
            value={this.state.pengajuanGroup1Form}
            onChange={this.onPengajuanGroup1Change}
          />
          <Form
            refs="form"
            type={PengajuanGroup2}
            options={optionsPengajuanGroup2}
            value={this.state.pengajuanGroup2Form}
            onChange={this.onPengajuanGroup2Change}
          />
          <View style={{width: 200}}>
            <Form
              refs="form"
              type={PengajuanGroup3}
              options={optionsPengajuanGroup3}
              value={this.state.pengajuanGroup3Form}
              onChange={this.onPengajuanGroup3Change}
            />
          </View>
          <Form
            refs="form"
            type={Tertangung1}
            options={optionsTertanggung1}
            value={this.state.tertanggung1Form}
            onChange={this.onTertanggungGroup4Change}
          />
          <Form
            refs="form"
            type={tertanggungDatePicker}
            options={optionsTertanggungDatePicker}
            value={this.state.tertanggungDatePicker}
            onChange={this.onTertanggungDatePickerChange}
          />
        </View>
      </ScrollView>
    );
  }
}