// LIBRARIES
import React from 'react';
import { Button, Popover, Dropdown, Menu } from 'antd';
import { Form, Field } from 'formik';
import { connect } from 'react-redux';

// COMPONENTS
import HeaderForm from "components/Forms/HeaderForm"
import { Inputs, Select, UploadImage, InputNumberAntD, 
        InputMaskNumber, InputTextArea } from 'components/Forms';

// HELPER FUNCTIONS


const content = (
  <div>
    <div>Select this button to sync the below data from the 
      Unioil Website to the Unioil Mobile App system.</div>
    <div>- City and Province</div>
    <div>- Products</div>
    <div>- Stations</div>
    {/* <div>- About Us</div> */}
  </div>
);

const formItemLayout = {
  labelCol: {
    xs: { span: 24 },
    sm: { span: 5 },
  },
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 10 },
  },
};

function CreateSystemPreferencesForm(props) {
  const {
    isSubmitting,
    loading,
    handleSubmit,
    handleFileUpload,
    onRemoveImage,
    syncStratuscast,
    actionAndroidTypeOptions,
    actionAndroidTypeDefaultValue,
    actionIosTypeOptions,
    actionIosTypeDefaultValue,
  } = props;

  return (
    <Form noValidate>
      
      <h2 style={{margin: '25px 35px'}}>Company Logo</h2>
      <HeaderForm 
        isInsideForm
        loading={loading}
        disabled={props.isValid == false ? true : false}
        title="System Parameters"
        action={handleSubmit}
        actionBtnName="Submit"
        // cancel={()=> {console.log('cancel button')}}
        // cancelBtnName="Cancel"
      />
      <Field
        name="logo"
        type="file"
        accept=".jpg , .png"
        multiple={false}
        fileList = {[
          // {
          //   uid: '123-dbeser',
          //   name: props.values.logo,
          //   status: 'done',
          //   url: `${process.env.REACT_APP_DEV}/${props.values.logo}`,
          //   thumbUrl: `${process.env.REACT_APP_DEV}/${props.values.logo}`,
          // }
        ]}
        imageUrl={props.values.logo && `${props.values.logo}`}
        className="upload-list-inline"
        icon="user"
        layout={formItemLayout}
        label="Upload Image"
        placeholder="Upload Image"
        component={UploadImage}
        handleFileUpload={handleFileUpload}
        imgWidth="294px"
        beforeUpload={()=> { return false}}
        isDefault
      />
      <div style={styles.borderDivision}></div>
      <h2 style={{margin: '25px 35px'}}>GPS Radius</h2>
      <Field
        name="gps"
        type="text"
        icon=""
        defaultValue={props.values.gps}
        layout={formItemLayout}
        label="GPS Radius (in meters)"
        placeholder="0"
        rows={6}
        min={0}
        component={InputNumberAntD}
      />
      <div style={styles.borderDivision}></div>
      <h2 style={{margin: '25px 35px'}}>Customer Service Details</h2>
      <Field
        name="contact_email_address_mobile"
        type="email"
        icon=""
        layout={formItemLayout}
        label="Contact Email Address"
        placeholder="username@domain.com"
        component={Inputs}
      />
      <Field
        name="contact_number_mobile"
        type="text"
        icon=""
        layout={formItemLayout}
        label="Contact Number"
        placeholder="63 947 687 9999"
        mask="99 999 999 9999"
        component={InputMaskNumber}
      />
      <div style={styles.borderDivision}></div>
      <h2 style={{margin: '25px 35px'}}>System Administrator Details</h2>
      <Field
        name="contact_details"
        type="text"
        icon=""
        layout={formItemLayout}
        label="Contact Details"
        placeholder="Contact Number"
        component={Inputs}
      />
      <div style={styles.borderDivision}></div>
      <h2 style={{margin: '25px 35px'}}>Information Guide Details</h2>
      <Field
        hasIcon
        onCountText
        charsperpage={100}
        maxLength="100"
        style={{marginBottom: '10px'}}
        name="information_guide_details"
        type="text"
        icon=""
        layout={formItemLayout}
        label="Details"
        placeholder="Details"
        rows={4}
        component={InputTextArea}
      />
      <div style={styles.borderDivision}></div>
      <h2 style={{margin: '25px 35px'}}>Android Version Update</h2>
      <Field
        onCountText
        charsperpage={20}
        maxLength="20"
        style={{marginBottom: '10px'}}
        name="android_version"
        type="text"
        icon=""
        layout={formItemLayout}
        label="Android Version"
        placeholder="Android Version"
        rows={1}
        component={Inputs}
      />
      <Field
        onCountText
        charsperpage={100}
        maxLength="100"
        style={{marginBottom: '10px'}}
        name="android_update_message"
        type="text"
        icon=""
        layout={formItemLayout}
        label="Version Update Message"
        placeholder="Android Version"
        rows={4}
        component={InputTextArea}
      />
      <div style={{marginTop:'20px'}}></div>
      <Field
        name="android_action"
        type="select"
        icon=""
        defaultValue={actionAndroidTypeDefaultValue && (actionAndroidTypeDefaultValue)}
        layout={formItemLayout}
        label="Version Action"
        placeholder="Select Version Action"
        mode="single"
        optionsList={actionAndroidTypeOptions}
        component={Select}
      />

      <div style={styles.borderDivision}></div>
      <h2 style={{margin: '25px 35px'}}>IOS Version Update</h2>
      <Field
        onCountText
        charsperpage={20}
        maxLength="20"
        style={{marginBottom: '10px'}}
        name="ios_version"
        type="text"
        icon=""
        layout={formItemLayout}
        label="IOS Version"
        placeholder="IOS Version"
        rows={1}
        component={Inputs}
      />
      <Field
        onCountText
        charsperpage={100}
        maxLength="100"
        style={{marginBottom: '10px'}}
        name="ios_update_message"
        type="text"
        icon=""
        layout={formItemLayout}
        label="Version Update Message"
        placeholder="Android Version"
        rows={4}
        component={InputTextArea}
      />
      <div style={{marginTop:'20px'}}></div>
      <Field
        name="ios_action"
        type="select"
        icon=""
        defaultValue={actionIosTypeDefaultValue && (actionIosTypeDefaultValue)}
        layout={formItemLayout}
        label="Version Action"
        placeholder="Select Version Action"
        mode="single"
        optionsList={actionIosTypeOptions}
        component={Select}
      />

      <div style={styles.borderDivision}></div>
      <h2 style={{margin: '25px 35px'}}>Update Details</h2>

     <Popover placement="topRight" content={content} title="Info">
        <Button  
          loading={loading} 
          onClick={syncStratuscast}
          style={{ width: '250px', margin:'0 35px 30px'}}
          type="primary" 
        >
          { loading ? "Syncing Data Please wait..." : "Sync Data"  } 
        </Button>
      </Popover>

    </Form>
  );
};


CreateSystemPreferencesForm = connect(
  state => ({
    
  }),
)(CreateSystemPreferencesForm);


export default CreateSystemPreferencesForm;



const styles = {
  borderDivision: {
    background: '#fcfcfc',
    borderTop: '1px solid #e6ecf5',
    borderBottom: '1px solid #e6ecf5',
    padding: '6px',
    margin: '43px 0px',
  }
}