import React, {Component} from 'react';
import { Button, Checkbox, Input, Modal, Form, Row, Col, Select, Tooltip } from 'antd';
import {ROW} from '../../../../gui-common/components/AntdTypes';
import SessionStyles from '../Session/Session.css';
import {DeleteOutlined, PlusOutlined} from '@ant-design/icons';

const {Item: FormItem} = Form;

function whitespaceMsg (value) {
  const leadingSpace = /^\s/.test(value);
  const trailingSpace = /\s$/.test(value);

  if (leadingSpace && trailingSpace) {return 'Contains Leading & Trailing Whitespace';}
  if (leadingSpace) {return 'Contains Leading Whitespace';}
  if (trailingSpace) {return 'Contains Trailing Whitespace';}
}

const whitespaces = /^\s|\s$/;

export default class SelectSuiteCapbilityEditor extends Component {


  handleSetType (index, type) {
    let {setTestSuitCapabilityParam, selectSuitCaps} = this.props;
    setTestSuitCapabilityParam(index, 'type', type);

    // Translate the current value to the new type
    let translatedValue = selectSuitCaps[index].value;
    switch (type) {
      case 'text':
        translatedValue = translatedValue + '';
        break;
      case 'number':
        translatedValue = parseInt(translatedValue, 10) || 0;
        break;
      default:
        break;
    }
    setTestSuitCapabilityParam(index, 'value', translatedValue);
  }

  render () {

    const {selectSuitCaps, setTestSuitCapabilityParam, t, addTestSuitCapability, removeTestCapability} = this.props;

    return <Row type={ROW.FLEX} align="top" justify="start"
                style={{fontSize: '14px'}}
                className={SessionStyles.capsFormRow}
    >
        <Col order={1} span={24}>
          <Form
            className={SessionStyles.newSessionForm}
          >
            {selectSuitCaps.map((cap, index) => <Row>
                <Col span={22} style={{marginBottom: '14px'}}>
                  <Row gutter={8} key={`name_value_${index}`} >
                    <Col span={8}>
                      <FormItem>
                        <Tooltip title={whitespaceMsg(cap.name)} visible={whitespaces.test(cap.name)}>
                          <Input id={`selectSuitCaps_name_${index}`} placeholder={t('Name')}
                                 value={cap.name} onChange={(e) => setTestSuitCapabilityParam(index, 'name', e.target.value)}
                                 className={SessionStyles.capsBoxFont}
                          />
                        </Tooltip>
                      </FormItem>
                    </Col>

                    <Col span={16}>
                      <FormItem>
                        <Tooltip title={whitespaceMsg(cap.value)} visible={whitespaces.test(cap.value)}>
                          <Input id={`selectSuitCaps_value_${index}`} placeholder={t('Value')} value={cap.value} onChange={(e) => setTestSuitCapabilityParam(index, 'value', e.target.value)}
                                 className={SessionStyles.capsBoxFont} />
                        </Tooltip>
                      </FormItem>
                    </Col>
                  </Row>

                  <Row gutter={8} key={`type_des_${index}`} style={{marginBottom: '8px'}}>
                    <Col span={8}>
                      <FormItem>
                        <Select onChange={(val) => this.handleSetType(index, val)} defaultValue={cap.type}>
                          <Option value='text'>{t('text')}</Option>
                          <Option value='number'>{t('number')}</Option>
                          <Option value='variable'>{t('variable')}</Option>
                        </Select>
                      </FormItem>
                    </Col>

                    <Col span={16}>
                      <FormItem>
                        <Tooltip title={whitespaceMsg(cap.des)} visible={whitespaces.test(cap.desc)}>
                          <Input id={`selectSuitCaps_des_${index}`} placeholder={t('description')} value={cap.desc} onChange={(e) => setTestSuitCapabilityParam(index, 'desc', e.target.value)}
                                 className={SessionStyles.capsBoxFont} />
                        </Tooltip>
                      </FormItem>
                    </Col>
                  </Row>
                </Col>
                <Col span={2} justify="center" align="middle" >
                  <div className={SessionStyles.btnDeleteCap}>
                    <FormItem>
                      <Button icon={<DeleteOutlined/>}
                              onClick={() => removeTestCapability(index)}/>
                    </FormItem>
                  </div>
                </Col>
            </Row>
              )}

            <Row>
              <Col span={22}>
                <FormItem>
                  {t(' add your select test suit params')}
                </FormItem>
              </Col>
              <Col span={2}>
                <FormItem>
                  <Button
                    id='btnAddDesiredCapability'
                    icon={<PlusOutlined/>}
                    onClick={addTestSuitCapability}
                    className={SessionStyles['add-desired-capability-button']} />
                </FormItem>
              </Col>
            </Row>
          </Form>
        </Col>
      </Row>
  }
}