import { connect } from 'react-redux';
import React from 'react';
import styled from 'styled-components';
import {
  IconButton,
  PrimaryIconButton,
} from '../../../components/common/buttons/IconButton';
import {
  addNewLogic,
  deleteLogic,
  updateLogicProperty,
} from '../../../redux/action-creators/form-builder-actions/form-builder.actions';

const FormLogic = ({
  elementDetails,
  addNewLogic,
  updateLogicProperty,
  deleteLogic,
}) => {
  return /*#__PURE__*/ React.createElement(
    'div',
    null,
    /*#__PURE__*/ React.createElement(
      'div',
      {
        className: 'py-2 border-top',
      },
      elementDetails.logics.length > 0
        ? /*#__PURE__*/ React.createElement(
            'div',
            null,
            elementDetails.logics.map((logic, i) => {
              return /*#__PURE__*/ React.createElement(
                'div',
                {
                  key: i,
                },
                /*#__PURE__*/ React.createElement(
                  LogicWrapper,
                  {
                    className: 'logic-wrapper',
                  },
                  /*#__PURE__*/ React.createElement(
                    'div',
                    {
                      className: 'if-logic-wrapper',
                    },
                    /*#__PURE__*/ React.createElement(
                      'div',
                      {
                        className: 'd-flx-alc if-logic-title',
                      },
                      /*#__PURE__*/ React.createElement(
                        'div',
                        {
                          className: 'mr-2',
                        },
                        /*#__PURE__*/ React.createElement(
                          'select',
                          {
                            value: logic.condition,
                            onChange: e =>
                              updateLogicProperty(
                                i,
                                e.target.value,
                                'condition'
                              ),
                            style: {
                              padding: '5px',
                              color: '#6b7184',
                              background: '#f1f1f5',
                              height: '44px',
                              width: '120px',
                              border: 'none',
                            },
                          },
                          /*#__PURE__*/ React.createElement(
                            'option',
                            {
                              value: '',
                            },
                            'condition'
                          ),
                          /*#__PURE__*/ React.createElement(
                            'option',
                            {
                              value: 'equals',
                            },
                            'Equals'
                          )
                        )
                      )
                    ),
                    /*#__PURE__*/ React.createElement(
                      LogicChoice,
                      {
                        className: 'logic-choice pb-2',
                      },
                      /*#__PURE__*/ React.createElement(
                        'div',
                        {
                          className: '',
                        },
                        /*#__PURE__*/ React.createElement(
                          'div',
                          {
                            className: 'mr-2',
                          },
                          /*#__PURE__*/ React.createElement(
                            'select',
                            {
                              value: logic.value,
                              onChange: e =>
                                updateLogicProperty(i, e.target.value, 'value'),
                              style: {
                                padding: '5px',
                                color: '#6b7184',
                                background: '#f1f1f5',
                                height: '44px',
                                width: '250px',
                                border: 'none',
                              },
                            },
                            /*#__PURE__*/ React.createElement(
                              'option',
                              {
                                value: '',
                              },
                              'Select option'
                            ),
                            elementDetails.options.map((opt, i) => {
                              return /*#__PURE__*/ React.createElement(
                                'option',
                                {
                                  key: i,
                                  value: opt?.label,
                                },
                                opt?.label
                              );
                            })
                          )
                        )
                      ),
                      /*#__PURE__*/ React.createElement(
                        'div',
                        {
                          className: '',
                        },
                        /*#__PURE__*/ React.createElement(
                          'select',
                          {
                            value: logic.action,
                            onChange: e =>
                              updateLogicProperty(i, e.target.value, 'action'),
                            style: {
                              padding: '5px',
                              color: '#6b7184',
                              background: '#f1f1f5',
                              height: '44px',
                              width: '100px',
                              border: 'none',
                            },
                          },
                          /*#__PURE__*/ React.createElement(
                            'option',
                            {
                              value: '',
                            },
                            'select action'
                          ),
                          /*#__PURE__*/ React.createElement(
                            'option',
                            {
                              value: 'show',
                            },
                            'Show'
                          ),
                          /*#__PURE__*/ React.createElement(
                            'option',
                            {
                              value: 'hide',
                            },
                            'Hide'
                          )
                        )
                      ),
                      /*#__PURE__*/ React.createElement(
                        'div',
                        {
                          className: '',
                        },
                        /*#__PURE__*/ React.createElement(
                          'select',
                          {
                            value: logic.targets[0] ? logic.targets[0] : '',
                            onChange: e =>
                              updateLogicProperty(i, e.target.value, 'targets'),
                            style: {
                              padding: '5px',
                              color: '#6b7184',
                              background: '#f1f1f5',
                              height: '44px',
                              width: '300px',
                              border: 'none',
                            },
                          },
                          /*#__PURE__*/ React.createElement(
                            'option',
                            {
                              value: '',
                            },
                            'select target'
                          )
                        )
                      ),
                      /*#__PURE__*/ React.createElement(
                        'div',
                        {
                          className: 'd-flx-alc-jsb',
                        },
                        /*#__PURE__*/ React.createElement(
                          'span',
                          {
                            onClick: () => deleteLogic(),
                          },
                          ' ',
                          /*#__PURE__*/ React.createElement(IconButton, {
                            svg: 'close',
                            className: 'delete-btn',
                          })
                        )
                      )
                    )
                  )
                )
              );
            })
          )
        : /*#__PURE__*/ React.createElement(
            'div',
            {
              className: 'd-flx-alc',
            },
            /*#__PURE__*/ React.createElement(
              'span',
              {
                onClick: () => addNewLogic(),
              },
              /*#__PURE__*/ React.createElement(PrimaryIconButton, {
                svg: 'add-box',
                title: 'Add Logic to this question.',
                color: '#838CA2',
              })
            ),
            /*#__PURE__*/ React.createElement(
              'a',
              {
                href: '/',
              },
              'Learn more about Logic '
            )
          )
    )
  );
};

export default connect(null, {
  addNewLogic,
  updateLogicProperty,
  deleteLogic,
})(FormLogic);
const LogicChoice = styled.div`
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  padding-top: 2rem;

  > * {
    &:first-child,
    &:nth-child(3n) {
      width: 32%;
    }
    &:nth-child(2n) {
      width: 16%;
    }
    &:last-child {
      width: 12%;
    }
  }
  .delete-btn {
    color: #d50033;
    svg {
      width: 20px;
      height: 20px;
    }
  }
  .add-btn {
    color: #61677c;
    svg {
      width: 20px;
      height: 20px;
    }
  }
`;
const LogicWrapper = styled.div`
  padding-left: 100px;
  position: relative;
  .if-logic-wrapper {
    padding-bottom: 5rem;
    position: relative;
    &:before {
      content: 'IF';
      width: 55px;
      height: 35px;
      background: #e8edff;
      border-radius: 2px;
      position: absolute;
      left: -100px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--ff-medium);
      color: #0a1045;
      font-size: 1.4rem;
    }
    &:after {
      content: '';
      width: 1px;
      height: 100%;
      background: #e8edff;
      border-radius: 2px;
      position: absolute;
      left: -70px;
      top: 0;
    }
    .if-logic-title {
      > * {
        &:first-child {
          width: 81px;
        }
      }
    }
  }
  .then-logic-wrapper {
    position: relative;
    &:before {
      content: 'THEN';
      width: 55px;
      height: 35px;
      background: #e8edff;
      border-radius: 2px;
      position: absolute;
      left: -100px;
      top: -10px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--ff-medium);
      color: #0a1045;
      font-size: 1.4rem;
    }
  }
`;
