import React from 'react';
import web from './images/box.svg';
import mobile from './images/mobile_line.svg';
import ios from './images/ios.svg';
import android from './images/android.svg';
import SearchInputBox from './SearchInputBox';
import LeftNav from './LeftNav';

class SubNav extends React.Component {
  state = {
    searchcontainer: false,
  };
  render() {
    const ColoredLine = ({ color }) => (
      <hr
        style={{
          color: color,
          backgroundColor: color,
          height: 1,
        }}
      />
    );

    const clickChange = (e) => {
      this.setState({ searchcontainer: !this.state.searchcontainer });
    };
    const x = this.state.searchcontainer;

    return (
      <>
        <div className='w-full'>
          <div className='flex items-stretch'>
            <div className='w-1/4 max-w-sm justify-center flex'>
              <button
                className='w-2/5 my-5 rounded-l-2xl border-primary_teal_green bg-primary_teal_green text-white bg-transparent border-l border-t border-b font-bold text-xs px-4 py-2 rounded-l outline-none focus:outline-none ease-linear transition-all duration-150'
                type='button'
              >
                Community Edition
              </button>
              <button
                className='w-2/5 my-5 rounded-r-2xl border-primary_teal_green bg-transparent border border-solid font-bold text-xs px-4 py-2 outline-none focus:outline-none ease-linear transition-all duration-150'
                type='button'
              >
                Testsigma Cloud
              </button>
            </div>
            <div className='flex-auto flex  items-center'>
              <div className='flex w-4/5 border-r'>
                <button className='flex ml-20 my-2 bg-primary_teal_green bg-transparent border-primary_teal_green duration-150 ease-linear focus:outline-none font-bold h-1/2 outline-none px-4 py-2 rounded-3xl text-white text-xs transition-all'>
                  <svg
                    width='15'
                    height='15'
                    viewBox='0 0 15 15'
                    fill='none'
                    xmlns='http://www.w3.org/2000/svg'
                    className='pr-1.5'
                  >
                    <path
                      d='M1.79486 2.68311H2.99125V3.8795H1.79486V2.68311Z'
                      fill='white'
                    />
                    <path
                      d='M4.18744 2.68311H5.38383V3.8795H4.18744V2.68311Z'
                      fill='white'
                    />
                    <path
                      d='M6.58008 2.68311H7.77647V3.8795H6.58008V2.68311Z'
                      fill='white'
                    />
                    <path
                      d='M14.0625 0.888672H0.9375C0.68886 0.888672 0.450403 0.987444 0.274587 1.16326C0.098772 1.33907 0 1.57753 0 1.82617V13.0762C0 13.3248 0.098772 13.5633 0.274587 13.7391C0.450403 13.9149 0.68886 14.0137 0.9375 14.0137H14.0625C14.3111 14.0137 14.5496 13.9149 14.7254 13.7391C14.9012 13.5633 15 13.3248 15 13.0762V1.82617C15 1.57753 14.9012 1.33907 14.7254 1.16326C14.5496 0.987444 14.3111 0.888672 14.0625 0.888672ZM0.9375 1.82617H14.0625V3.79492H0.9375V1.82617ZM0.9375 13.0762V4.54492H14.0625V13.0762H0.9375Z'
                      fill='white'
                    />
                  </svg>
                  Web
                </button>
                <button className='bg-gray-200 bg-transparent duration-150 ease-linear flex focus:outline-none h-1/2 ml-6 my-2 outline-none px-4 py-2 rounded-3xl text-xs transition-all'>
                  <svg
                    width='9'
                    height='13'
                    viewBox='0 0 9 13'
                    fill='none'
                    xmlns='http://www.w3.org/2000/svg'
                    className='mr-1.5'
                  >
                    <path
                      d='M7.35715 0.888672H1.35714C1.12981 0.888672 0.911797 0.978978 0.751052 1.13972C0.590306 1.30047 0.5 1.51849 0.5 1.74581V12.0315C0.5 12.2589 0.590306 12.4769 0.751052 12.6376C0.911797 12.7984 1.12981 12.8887 1.35714 12.8887H7.35715C7.58448 12.8887 7.80249 12.7984 7.96324 12.6376C8.12399 12.4769 8.21429 12.2589 8.21429 12.0315V1.74581C8.21429 1.51849 8.12399 1.30047 7.96324 1.13972C7.80249 0.978978 7.58448 0.888672 7.35715 0.888672V0.888672ZM1.35714 1.74581H7.35715V9.4601H1.35714V1.74581ZM1.35714 12.0315V10.3172H7.35715V12.0315H1.35714Z'
                      fill='#858585'
                    />
                  </svg>
                  Mobile
                </button>
                <button className='bg-gray-200 bg-transparent duration-150 ease-linear flex focus:outline-none h-1/2 ml-6 my-2 outline-none px-4 py-2 rounded-3xl text-xs transition-all'>
                  <svg
                    width='13'
                    height='14'
                    viewBox='0 0 13 14'
                    fill='none'
                    xmlns='http://www.w3.org/2000/svg'
                    className='mr-1.5'
                  >
                    <path
                      d='M6.51473 3.47C6.53903 2.80854 6.72484 2.22768 7.06773 1.74225C7.41239 1.25416 7.98198 0.907421 8.76199 0.710938C8.76703 0.734646 8.77266 0.758947 8.77829 0.782952V0.908606C8.77829 1.1934 8.70894 1.52028 8.57262 1.87946C8.42977 2.22768 8.20632 2.55515 7.90938 2.85062C7.63199 3.11112 7.37534 3.2833 7.14834 3.36124C7.07336 3.38376 6.97052 3.40569 6.84665 3.42555C6.73634 3.44273 6.62567 3.45755 6.51473 3.47V3.47Z'
                      fill='#858585'
                    />
                    <path
                      d='M6.64457 4.45125C5.7638 4.45125 5.15213 3.67214 4.28321 3.67214C3.4143 3.67214 1.62402 4.47081 1.62402 7.2284C1.62402 9.98598 3.21367 11.7626 3.39148 11.9701C3.5693 12.1775 3.98064 12.711 4.6175 12.711C5.25467 12.711 5.95229 12.2042 6.64457 12.2042C7.33745 12.2042 8.20932 12.711 8.77832 12.711C9.34733 12.711 9.58145 12.4789 9.96878 12.0785C10.3561 11.6785 11.0949 10.4575 11.3528 9.7243C10.9278 9.47151 9.80164 8.78485 9.80164 7.2284C9.80164 6.19115 10.1807 5.32906 10.939 4.6427C10.4415 3.99576 9.86446 3.67214 9.20804 3.67214C8.22296 3.67214 7.52534 4.45125 6.64457 4.45125Z'
                      stroke='#858585'
                      strokeWidth='1.4'
                      stroke-linejoin='round'
                    />
                  </svg>
                  iOS
                </button>
                <button className='bg-gray-200 bg-transparent duration-150 ease-linear flex focus:outline-none h-1/2 ml-6 my-2 outline-none px-4 py-2 rounded-3xl text-xs transition-all'>
                  <svg
                    width='10'
                    height='13'
                    viewBox='0 0 10 13'
                    fill='none'
                    xmlns='http://www.w3.org/2000/svg'
                    className='mr-1.5'
                  >
                    <path
                      d='M3.8527 3.03369C3.60362 3.03369 3.42417 3.21313 3.42417 3.46087C3.42417 3.70861 3.60495 3.88806 3.8527 3.88806C4.10177 3.88806 4.28122 3.70861 4.28122 3.46087C4.28256 3.21447 4.10177 3.03369 3.8527 3.03369V3.03369ZM9.12755 4.32462C8.94275 4.13981 8.68966 4.0367 8.41513 4.0367C8.36291 4.0367 8.31604 4.04206 8.27184 4.05009V4.0367H8.22364C8.14998 3.62693 7.97456 3.22652 7.71343 2.8663C7.46301 2.52214 7.1376 2.22485 6.76532 1.9972L7.10144 1.51779V1.47359C7.10144 1.46288 7.1068 1.44279 7.11081 1.42271C7.11885 1.39057 7.12956 1.34905 7.12956 1.30352C7.12956 1.05578 6.94878 0.876339 6.70104 0.876339C6.5698 0.876339 6.43991 0.95267 6.3542 1.08257L5.96183 1.64634C5.56009 1.51511 5.12621 1.44547 4.70573 1.44547C4.28658 1.44547 3.8527 1.51511 3.44962 1.64634L3.05859 1.08123C2.9702 0.95267 2.84299 0.875 2.71041 0.875C2.46133 0.875 2.28189 1.05444 2.28189 1.30218C2.28189 1.38521 2.31537 1.47359 2.37161 1.53519L2.67426 1.96774C2.28992 2.19539 1.95782 2.49535 1.7074 2.83951C1.44761 3.19974 1.27888 3.60014 1.21594 4.00992H1.14228V4.02331C1.09943 4.01527 1.05256 4.00992 0.998996 4.00992C0.727151 4.00992 0.474054 4.11035 0.287914 4.29515C0.103113 4.47995 0 4.73171 0 5.0049V8.15187C0 8.42371 0.100435 8.67547 0.286575 8.86027C0.471376 9.04507 0.725812 9.14818 0.998996 9.14818C1.05122 9.14818 1.09809 9.14283 1.14228 9.13479V10.3869C1.14228 10.7779 1.46234 11.098 1.8547 11.098H2.28189V11.8787C2.28189 12.1505 2.38232 12.4023 2.56846 12.5871C2.75326 12.7719 3.0077 12.875 3.28088 12.875C3.55273 12.875 3.80583 12.7746 3.99197 12.5898C4.17677 12.405 4.27988 12.1532 4.27988 11.88V11.1006H5.13425V11.8787C5.13425 12.1505 5.23468 12.4023 5.42082 12.5871C5.60562 12.7719 5.86006 12.875 6.13324 12.875C6.40643 12.875 6.65819 12.7746 6.84433 12.5857C7.02913 12.4009 7.13224 12.1492 7.13224 11.876V11.0966H7.55942C7.95179 11.0966 8.27184 10.7779 8.27184 10.3855V9.16157C8.3147 9.16961 8.36157 9.17497 8.41513 9.17497C8.68698 9.17497 8.94007 9.07453 9.12621 8.88973C9.31101 8.70493 9.41413 8.45317 9.41413 8.17999V5.03302C9.41279 4.76117 9.31235 4.51075 9.12755 4.32462V4.32462ZM1.14362 8.18133C1.14362 8.27239 1.0914 8.32328 1.00033 8.32328C0.909274 8.32328 0.857047 8.27239 0.857047 8.18133V5.03302C0.857047 4.94196 0.909274 4.89107 1.00033 4.89107C1.0914 4.89107 1.14362 4.94196 1.14362 5.03302V8.18133ZM2.89923 2.86763C3.40141 2.50205 4.04151 2.30118 4.70706 2.30118C5.37261 2.30118 6.01272 2.50339 6.5149 2.87031C6.94878 3.18769 7.24071 3.59612 7.35454 4.04206H2.05959C2.17342 3.59479 2.46803 3.18501 2.89923 2.86763V2.86763ZM3.42551 11.9028C3.41748 11.9778 3.36659 12.0193 3.2849 12.0193C3.19384 12.0193 3.14161 11.9684 3.14161 11.8773V11.098H3.42551V11.9028ZM6.13458 12.0193C6.04352 12.0193 5.9913 11.9684 5.9913 11.8773V11.098H6.27519V11.9028C6.26716 11.9778 6.21761 12.0193 6.13458 12.0193ZM7.41748 10.2436H1.99933V4.89241H7.41748V10.2436ZM8.55842 8.18133C8.55842 8.27239 8.50619 8.32328 8.41513 8.32328C8.32407 8.32328 8.27184 8.27239 8.27184 8.18133V5.03302C8.27184 4.94196 8.32407 4.89107 8.41513 4.89107C8.50619 4.89107 8.55842 4.94196 8.55842 5.03302V8.18133ZM5.56411 3.03369C5.31503 3.03369 5.13559 3.21313 5.13559 3.46087C5.13559 3.70861 5.31637 3.88806 5.56411 3.88806C5.81319 3.88806 5.99397 3.70861 5.99397 3.45953C5.99264 3.21045 5.81453 3.03369 5.56411 3.03369V3.03369Z'
                      fill='#858585'
                    />
                  </svg>
                  Android
                </button>
                <button className='bg-gray-200 bg-transparent duration-150 ease-linear flex focus:outline-none h-1/2 ml-6 my-2 outline-none px-4 py-2 rounded-3xl text-xs transition-all'>
                  <svg
                    width='11'
                    height='13'
                    viewBox='0 0 11 13'
                    fill='none'
                    xmlns='http://www.w3.org/2000/svg'
                    className='mr-1.5'
                  >
                    <g clip-path='url(#clip0_3:8)'>
                      <path
                        d='M3.48692 4.806C3.48692 5.226 3.38426 5.562 3.17892 5.814C2.98292 6.05667 2.74026 6.21067 2.45092 6.276C2.74026 6.35067 2.98292 6.514 3.17892 6.766C3.38426 7.018 3.48692 7.34933 3.48692 7.76V10.518C3.48692 10.882 3.57092 11.1573 3.73892 11.344C3.90692 11.54 4.13559 11.638 4.42492 11.638H5.13892V12.548H4.31292C3.67826 12.548 3.19292 12.3847 2.85692 12.058C2.52092 11.7313 2.35292 11.26 2.35292 10.644V7.956C2.35292 7.54533 2.27826 7.242 2.12892 7.046C1.98892 6.85 1.73692 6.71467 1.37292 6.64L0.980923 6.542V6.024L1.37292 5.926C1.73692 5.85133 1.98892 5.716 2.12892 5.52C2.27826 5.324 2.35292 5.02067 2.35292 4.61V1.936C2.35292 1.32933 2.53026 0.862666 2.88492 0.535999C3.23959 0.2 3.71559 0.0319996 4.31292 0.0319996H5.13892V0.928H4.42492C4.13559 0.928 3.90692 1.026 3.73892 1.222C3.57092 1.418 3.48692 1.698 3.48692 2.062V4.806ZM10.0747 6.024V6.542L9.69669 6.64C9.32335 6.71467 9.06202 6.85 8.91269 7.046C8.77269 7.23267 8.70269 7.536 8.70269 7.956V10.644C8.70269 11.26 8.53469 11.7313 8.19869 12.058C7.86269 12.3847 7.37735 12.548 6.74269 12.548H5.91669V11.638H6.64469C6.92469 11.638 7.14869 11.54 7.31669 11.344C7.48469 11.1573 7.56869 10.882 7.56869 10.518V7.76C7.56869 7.34933 7.67135 7.018 7.87669 6.766C8.08202 6.514 8.32469 6.35067 8.60469 6.276C8.32469 6.21067 8.08202 6.05667 7.87669 5.814C7.67135 5.562 7.56869 5.226 7.56869 4.806V2.062C7.56869 1.698 7.48469 1.418 7.31669 1.222C7.14869 1.026 6.92469 0.928 6.64469 0.928H5.91669V0.0319996H6.74269C7.34002 0.0319996 7.81602 0.2 8.17069 0.535999C8.52535 0.862666 8.70269 1.32933 8.70269 1.936V4.61C8.70269 5.03 8.77269 5.338 8.91269 5.534C9.06202 5.72067 9.32335 5.85133 9.69669 5.926L10.0747 6.024ZM25.838 7.438H20.63L19.524 10H18.334L22.716 0.0319996H23.724L28.106 10H26.93L25.838 7.438ZM25.432 6.486L23.234 1.362L21.036 6.486H25.432ZM29.5953 0.0319996H33.5713C34.5979 0.0319996 35.3959 0.279333 35.9653 0.773999C36.5439 1.26867 36.8333 1.95 36.8333 2.818C36.8333 3.686 36.5439 4.372 35.9653 4.876C35.3866 5.37067 34.5886 5.618 33.5713 5.618H30.7433V10H29.5953V0.0319996ZM33.4733 4.666C34.2106 4.666 34.7659 4.50733 35.1393 4.19C35.5126 3.87267 35.6993 3.41533 35.6993 2.818C35.6993 2.22067 35.5126 1.768 35.1393 1.46C34.7659 1.14267 34.2106 0.983999 33.4733 0.983999H30.7433V4.666H33.4733ZM38.7144 0.0319996H39.8624V10H38.7144V0.0319996Z'
                        fill='#858585'
                      />
                    </g>
                    <defs>
                      <clipPath id='clip0_3:8'>
                        <rect width='11' height='13' fill='white' />
                      </clipPath>
                    </defs>
                  </svg>
                  API
                </button>
              </div>
              <SearchInputBox></SearchInputBox>
            </div>
          </div>
        </div>
        <ColoredLine color='#E5E5E5'></ColoredLine>
      </>
    );
  }
}

export default SubNav;