import React, { useState } from 'react';
import styled from 'styled-components';
import { IconButton } from '../../components/common/buttons/IconButton';
import { PrimaryButton } from '../../components/common/buttons/PrimaryBtn';
import { Search } from '../../components/common/inputs/Search';
export const FormBuilderLayout = ({ children }) => {
  return /*#__PURE__*/ React.createElement(MainWrapper, null, children);
};
export const FormBuilderside = ({ children, active, setActive }) => {
  return /*#__PURE__*/ React.createElement(
    Aside,
    {
      className: active ? 'active' : '',
    },
    /*#__PURE__*/ React.createElement(PrimaryButton, {
      text: 'form elements',
      className: 'form-field-toggle',
      onclick: () => setActive(!active),
    }),
    children
  );
};
export const FormElSearch = () => {
  const [active, setactive] = useState(false);
  return /*#__PURE__*/ React.createElement(
    AsideDiv,
    null,
    /*#__PURE__*/ React.createElement(
      'div',
      {
        className: `d-flx-alc-jsb ${active ? 'hide-search' : ''}`,
      },
      /*#__PURE__*/ React.createElement('h3', null, 'Form Elements'),
      /*#__PURE__*/ React.createElement(IconButton, {
        svg: 'search',
        onclick: () => setactive(true),
      })
    ),
    /*#__PURE__*/ React.createElement(
      'div',
      {
        className: `d-flx-alc-jsb search-indicator ${
          active ? 'show-search' : ''
        }`,
      },
      /*#__PURE__*/ React.createElement(IconButton, {
        svg: 'back-arrow',
        onclick: () => setactive(false),
      }),
      /*#__PURE__*/ React.createElement(Search, {
        className: 'fb-search',
      })
    ),
    /*#__PURE__*/ React.createElement(
      'div',
      {
        className: `search-result-container ${active ? 'active' : ''}`,
      },
      /*#__PURE__*/ React.createElement(
        'div',
        {
          className: 'empty-wrapper',
        },
        /*#__PURE__*/ React.createElement(
          'svg',
          null,
          /*#__PURE__*/ React.createElement('use', {
            href: '/images/icons.svg#search-bg',
          })
        ),
        /*#__PURE__*/ React.createElement(
          'p',
          null,
          'Your search results will stack here.'
        )
      )
    )
  );
};
export const FormElSearchResult = () => {
  return /*#__PURE__*/ React.createElement(
    AsideDiv,
    {
      className: 'd-flx-alc-jsb',
    },
    /*#__PURE__*/ React.createElement('h3', null, 'Form Elements'),
    /*#__PURE__*/ React.createElement(IconButton, {
      svg: 'search',
    })
  );
};
export const FormBuilderMain = ({ children }) => {
  return /*#__PURE__*/ React.createElement(Section, null, children);
};
export const FormBuilderContent = ({ children }) => {
  return /*#__PURE__*/ React.createElement(
    'div',
    null,
    /*#__PURE__*/ React.createElement(Div, null, children)
  );
};
export const FormFieldWrapper = ({
  children,
  className,
  altclassName,
  onclick,
}) => {
  return /*#__PURE__*/ React.createElement(
    FormField,
    {
      onClick: onclick,
      className: `form-field-wrapper ${altclassName} ${className}`,
    },
    children
  );
};
const MainWrapper = styled.div`
  width: 100%;
  height: calc(100vh - 127px);
  background: #fbfbff;
  display: flex;
  flex-wrap: wrap;
`;
const Aside = styled.aside`
  position: absolute;
  width: 0;
  overflow: hidden;
  height: calc(100vh - 127px);
  background: #ffffff;
  border: 1px solid #e8edff;
  box-shadow: 0px 10px 70px rgba(237, 240, 247, 0.5);
  &.active {
    width: 100%;
    oveflow: auto;
    z-index: 11;
  }
  @media (min-width: 768px) {
    position: relative;
    width: 200px;
    height: calc(100vh - 127px);
  }
  @media (min-width: 992px) {
    position: relative;
    width: 285px;
    height: calc(100vh - 127px);
  }
  .form-field-toggle {
    position: fixed;
    bottom: 0rem;
    right: 0rem;
    z-index: 3;
    width: 100%;
    @media (min-width: 768px) {
      display: none;
    }
  }
`;
const Section = styled.section`
  width: 100%;
  height: calc(100vh - 127px);
  background: #fbfbff;
  padding: 1.6rem 2rem;
  @media (min-width: 768px) {
    width: calc(100% - 200px);
    padding: 1.6rem 2rem;
  }
  @media (min-width: 992px) {
    width: calc(100% - 285px);
    padding: 1.6rem 2.7rem;
  }
  .float-child-wrap {
    display: flex;
    flex-wrap: nowrap;
    > * {
      flex: 0 0 auto;
    }
  }
`;
const Div = styled.div`
  width: 100%;
  height: calc(100vh - 177px);
  background: #fff;
  padding: 2rem 2rem;
  border: 1px solid #eff2fb;
  box-shadow: 0px 10px 70px rgba(224, 228, 237, 0.7);
  border-radius: 0;
  oveflow: hidden;
  overflow-y: auto;
  @media (min-width: 768px) {
    padding: 2rem;
  }
  @media (min-width: 992px) {
    padding: 3rem 5rem;
  }
`;
const AsideDiv = styled.div`
  width: 100%;
  background: #e9eaf0;
  padding: 1rem 2rem;
  position: relative;
  h3 {
    color: #61677c;
    font-size: 14px;
    font-weight: 500;
    font-family: var(--ff-medium);
  }
  .hide-search {
    display: none;
  }
  .search-indicator {
    display: none;
    &.show-search {
      display: flex;
    }
  }
  .search-result-container {
    position: absolute;
    width: 100%;
    left: 0;
    top: 50px;
    height: calc(100vh - 180px);
    overflow: auto;
    background: #fff;
    display: none;
    z-index: 4;
    &.active {
      display: block;
    }
    .empty-wrapper {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      svg {
        width: 32px;
        height: 32px;
      }
      p {
        font-family: var(--ff-medium);
        font-style: normal;
        font-weight: 500;
        font-size: 16px;
        max-width: 150px;
        text-align: center;
        margin-top: 2rem;
      }
    }
  }
`;
const FormField = styled.div`
  width: 100%;
  background: #ffffff;
  border: 1px solid #eff2fb;
  border-radius: 10px;
  padding: 1.5rem;
  margin-bottom: 4rem;
  @media (min-width: 992px) {
    padding: 2.4rem;
  }
  &.alt {
    background-color: #ffffff;
    border: none;
    &.active {
      border: 1px dashed #eff2fb;
    }
  }

  &.alt-alt {
    padding: 0;
  }
`;
