text: import React, { Component } from 'react';
  import { FormWithConstraints } from 'react-form-with-constraints';
  import { Translation } from 'react-i18next';
  import { Badge, Col, Container, FormGroup, Row } from 'reactstrap';
  import styled from "styled-components";
  import * as Constant from '../../../Base/Constant';
  import Button1 from '../../../Base/FormControl/Button';
  import FieldValidation from '../../../Base/FormControl/FieldValidation';
  import Input from '../../../Base/FormControl/Input';
  import Select from '../../../Base/FormControl/Select';
  import TextArea from '../../../Base/FormControl/TextArea';
  
  export default class DomainManagementService extends Component {
  
    constructor(props) {
      super(props);
      this.state = {
        serviceTypeId: props.location.service !== undefined ? props.location.service.serviceType : '0',
        serviceTypeName: 'Domain Management',
        createserviceorder: {
          serviceIdentification: '',
          serviceType: '',
          remarks: '',
          email: '',
          phoneContact: ''
        },
       
        countries: [{ name: "India", code: "IN" },
        { name: "United State", code: "US" },
        { name: "United Kingdom", code: "UK" },
        { name: "Luxembourg", code: "LU" },
        { name: "Netherlands", code: "NL" },
        { name: "Sweden", code: "SE" }]
  
      }
      this.handleFormSubmit = this.handleFormSubmit.bind(this);
      this.handleInput = this.handleInput.bind(this);
    }
  
    handleInput(e) {
      let value = e.target.value;
      let name = e.target.name;
      /* this.setState(prevState => ({
        createserviceorder: { ...prevState.createserviceorder, [name]: value }
      }), () => console.log(this.state.createserviceorder)) */
      
      this.setState(prevState => ({ createserviceorder: { ...prevState.createserviceorder, [name]: value } }));
      this.form.validateFields(e.target);
      this.form.validateFields();
    }
  
    handleFormSubmit(e) {
      e.preventDefault();
      this.form.validateFields();
      if (this.form.isValid()) {     
      this.props.history.push({ pathname: Constant.DOMAIN_MGNT_VIEW_URL, service: { serviceType: this.state.serviceTypeId } })
    }}
  
    customContentRenderer = ({ props, state, methods }) => (
      <div style={{ cursor: "pointer" }}>
        {state.values.length} of {props.options.length} selected
      </div>
    );
  
    customDropdownRenderer = ({ props, state, methods }) => {
      const regexp = new RegExp(state.search, "i");
      return (
        <div>
          <SearchAndToggle>
            <Buttons>
              <div> </div>
              {state.values.length === props.options.length ? (
                <Button className="clear" onClick={methods.clearAll}>
                  Clear all
                </Button>
              ) : (
                  <Button onClick={methods.selectAll}>Select all</Button>
                )}
            </Buttons>
          </SearchAndToggle>
          <Items>
            {props.options
              .filter(item => regexp.test(item[props.searchBy] || item.label))
              .map(option => (
                <Item key={option.value} onClick={() => methods.addItem(option)}>
                  <input
                    type="checkbox"
                    onChange={() => methods.addItem(option)}
                    checked={state.values.indexOf(option) !== -1}
                  />
                  <ItemLabel>{option.label}</ItemLabel>
                </Item>
              ))}
          </Items>
        </div>
      );
    };
    render() {
      return (
        <>
          <Container className="div-border div-margin">
          <FormWithConstraints ref={form => this.form = form} onSubmit={this.handleFormSubmit} noValidate>
              <Row className="div-margin heading-green-row">
                <Col className="heading-green" xs="12" sm="12" md="12">Create Order / Service</Col>
              </Row>
              <Row className="div-margin">
              <Col xs="12" sm="12" md="3">
                  <FormGroup>
                    <Input inputtype={"text"} title="order-service.serviceIdentification" name={"serviceIdentification"} value={this.state.createserviceorder.serviceIdentification || ''}
                      placeholder={"Enter Your Service Identification"} handleChange={this.handleInput} isrequired="Y"/>
                    <FieldValidation title="order-service.serviceIdentification" for="serviceIdentification" minlength="5" isrequired="Y" />
                  </FormGroup>
                </Col> 
                <Col xs='12' sm='12' md='3'>
                  <label className="form-label" ><Translation>{(t) => <>{t('order-service.serviceType')}</>}</Translation></label>
                  <div>{this.state.serviceTypeName}</div>
                </Col>
                <Col xs='12' sm='12' md='3'>
                  <Input inputtype={"text"} title={"order-service.email"} name={"email"} value={this.state.createserviceorder.email || ''} placeholder={""} onChange={this.handleInput} required={false} />
                </Col>
                <Col xs='12' sm='12' md='3'>
                  <FormGroup>
                    <Input inputtype={"text"} title={"order-service.phoneContact"} name={"phoneContact"} value={this.state.createserviceorder.phoneContact || ''} placeholder={""} onChange={this.handleInput} required={false} />
                  </FormGroup>
                </Col>
              </Row>
              <Row className="div-margin">
                <Col xs='12' sm='12' md='3'>
                  <FormGroup>
                    <TextArea title="order-service.remark" name={"remarks"} rows="1" cols="10" value={this.state.createserviceorder.remarks} handleChange={this.handleInput} />
                  </FormGroup>
                </Col>
              </Row>
              <Row className="heading-green-row div-margin"> <Col className="heading-green" xs="12" sm="12" md="12">Service Details</Col></Row>
              <Row className="div-margin">
                <Col xs='12' sm='12' md='3'>
                  <Input inputtype={"text"} title={"order-service.user"} name={"user"} value={this.state.createserviceorder.user || ''}
                    placeholder={""} onChange={this.handleInput} isrequired="Y" />
                 <FieldValidation title="order-service.user" for="user" minlength="5" isrequired="Y" />
                </Col>
                <Col xs='12' sm='12' md='3'>
                  <Input inputtype={"text"} title={"order-service.defaultEmail"} name={"defaultEmail"} value={this.state.createserviceorder.defaultEmail || ''}
                    placeholder={""} onChange={this.handleInput} isrequired="Y" />
                     <FieldValidation title="order-service.defaultEmail" for="defaultEmail" minlength="5" isrequired="Y" />
                </Col>
                <Col xs='12' sm='12' md='3'>
                  <Input inputtype={"text"} title={"order-service.password"} name={"password"} value={this.state.createserviceorder.password || ''}
                    placeholder={""} onChange={this.handleInput} isrequired="Y"  />
                     <FieldValidation title="order-service.password" for="password" minlength="5" isrequired="Y" />
                </Col>
                <Col xs='12' sm='12' md='3'>
                <Badge variant="success" className="badge-success" style={{marginTop: "27px"}}>Generate Password</Badge>
                </Col>
              </Row>
              <Row className="div-margin">
                <Col xs='12' sm='12' md='3'>
                  <Input inputtype={"text"} title={"order-service.firstName"} name={"firstName"} value={this.state.createserviceorder.firstName || ''}
                    placeholder={""} onChange={this.handleInput} isrequired="Y"  />
                    <FieldValidation title="order-service.firstName" for="firstName" minlength="5" isrequired="Y" />
                </Col>
                <Col xs='12' sm='12' md='3'>
                  <Input inputtype={"text"} title={"order-service.lastName"} name={"lastName"} value={this.state.createserviceorder.lastName || ''}
                    placeholder={""} onChange={this.handleInput} isrequired="Y"  />
                    <FieldValidation title="order-service.lastName" for="lastName" minlength="5" isrequired="Y" />
                </Col>
                <Col xs='12' sm='12' md='3'>
                  <Input inputtype={"text"} title={"order-service.organizationName"} name={"orgName"} value={this.state.createserviceorder.orgName || ''}
                    placeholder={""} onChange={this.handleInput} isrequired="Y"  />
                    <FieldValidation title="order-service.organizationName" for="orgName" minlength="5" isrequired="Y" />
                </Col>
                <Col xs='12' sm='12' md='3'>
                  <Input inputtype={"text"} title={"order-service.address"} name={"address"} value={this.state.createserviceorder.address || ''}
                    placeholder={""} onChange={this.handleInput} isrequired="Y"  />
                    <FieldValidation title="order-service.address" for="address" minlength="5" isrequired="Y" />
                </Col>
              </Row>
  
              <Row className="div-margin">
                <Col xs='12' sm='12' md='3'>
                  <Input inputtype={"text"} title={"order-service.complement"} name={"complement"} value={this.state.createserviceorder.complement || ''}
                    placeholder={""} onChange={this.handleInput} required={false} />
                </Col>
                <Col xs='12' sm='12' md='3'>
                  <Input inputtype={"text"} title={"order-service.postalCode"} name={"postCode"} value={this.state.createserviceorder.postCode || ''}
                    placeholder={""} onChange={this.handleInput} isrequired="Y"  />
                    <FieldValidation title="order-service.postalCode" for="postalCode" minlength="5" isrequired="Y" />
                </Col>
                <Col xs='12' sm='12' md='3'>
                  <Input inputtype={"text"} title={"order-service.city"} name={"city"} value={this.state.createserviceorder.city || ''}
                    placeholder={""} onChange={this.handleInput} isrequired="Y"  />
                    <FieldValidation title="order-service.city" for="city" minlength="5" isrequired="Y" />
                </Col>
                <Col xs='12' sm='12' md='3'>
                  <Input inputtype={"text"} title={"order-service.state"} name={"state"} value={this.state.createserviceorder.state || ''}
                    placeholder={""} onChange={this.handleInput} required={false} />
                </Col>
              </Row>
  
              <Row className="div-margin">
                <Col xs='12' sm='12' md='3'>
                  <FormGroup>
                    <label className="form-label labelStyle" >Country</label>
                    <Select noDataRenderer={this.customNoDataRenderer}
                      contentRenderer={this.customContentRenderer}
                      dropdownRenderer={this.customDropdownRenderer}
                      options={this.state.countries} onChange={(values) => this.setValues(values)} />
                  </FormGroup>
                </Col>
                <Col xs='12' sm='12' md='3'>
                  <Input inputtype={"text"} title={"order-service.phone"} name={"phone"} value={this.state.createserviceorder.phone || ''}
                    placeholder={""} onChange={this.handleInput} isrequired="Y"  />
                    <FieldValidation title="order-service.phone" for="phone" minlength="5" isrequired="Y" />
                </Col>
                <Col xs='12' sm='12' md='3'>
                  <Input inputtype={"text"} title={"order-service.fax"} name={"fax"} value={this.state.createserviceorder.fax || ''}
                    placeholder={""} onChange={this.handleInput} isrequired="Y"  />
                    <FieldValidation title="order-service.fax" for="fax" minlength="5" isrequired="Y" />
                </Col>
                <Col xs='12' sm='12' md='3'>
                  <FormGroup>
                    <Input inputtype={"text"} title={"order-service.email"} name={"serviceEmail"} value={this.state.createserviceorder.serviceEmail || ''}
                      placeholder={""} onChange={this.handleInput} isrequired="Y"  />
                      <FieldValidation title="order-service.email" for="serviceEmail" minlength="5" isrequired="Y" />
                  </FormGroup>
                </Col>
              </Row>
              <Row>
                <Col>
                  <Button1 type={"secondary"} align={'right'} submit={true} title={"common.next"} />
                </Col>
              </Row>
            </FormWithConstraints>
          </Container>
        </>
      );
    }
  }
  const SearchAndToggle = styled.div`
    display: flex;
    flex-direction: column;
  
    input {
      margin: 10px 10px 0;
      line-height: 30px;
      padding: 0px 20px;
      border: 1px solid #ccc;
      border-radius: 3px;
      :focus {
        outline: none;
        border: 1px solid deepskyblue;
      }
    }
  `;
  
  const Items = styled.div`
    overflow: auto;
    min-height: 10px;
    max-height: 200px;
  `;
  
  const Item = styled.div`
    display: flex;
    margin: 10px;
    align-items: baseline;
  `;
  
  const ItemLabel = styled.div`
    margin: 5px 10px;
  `;
  
  const Buttons = styled.div`
    display: flex;
    justify-content: space-between;
  
    & div {
      margin: 10px 0 0 10px;
      font-weight: 600;
    }
  `;
  
  const Button = styled.button`
    background: none;
    border: 1px solid #555;
    color: #555;
    border-radius: 3px;
    margin: 10px 10px 0;
    padding: 3px 5px;
    font-size: 10px;
    text-transform: uppercase;
    cursor: pointer;
    outline: none;
  
    &.clear {
      color: tomato;
      border: 1px solid tomato;
    }
  
    :hover {
      border: 1px solid deepskyblue;
      color: deepskyblue;
    }
  `;