import { Link } from '@0x/react-shared';
import * as _ from 'lodash';
import * as React from 'react';
import styled, { withTheme } from 'styled-components';
import { CustomAutoComplete } from 'ts/components/docs/search/autocomplete';

import algoliasearch from 'algoliasearch/lite';
// import Autocomplete from 'react-autocomplete';
import Autosuggest from 'react-autosuggest';
import {
    Configure,
    connectAutoComplete,
    Highlight,
    Index,
    InstantSearch,
} from 'react-instantsearch-dom';

const searchClient = algoliasearch(
  'VHMP18K2OO',
  'e46d0171577e85fa5418c50b18f80ade',
);
// const index = searchClient.initIndex(['0x_tools_test']);

interface Props {
    isHome?: boolean;
}

interface LinkConfig {
    label: string;
    url: string;
    shouldOpenInNewTab?: boolean;
}

const AutoComplete = connectAutoComplete(CustomAutoComplete);

export const SearchInput: React.FunctionComponent<Props> = (props: Props) => (
    <>
        <InstantSearch
            searchClient={searchClient}
            indexName="0x_tools_test"
            root={{
                Root: 'div',
                props: {
                    style: {
                    },
                },
            }}
        >
        <Wrapper isHome={props.isHome}>
            <AutoComplete isHome={props.isHome} />
            <Configure hitsPerPage={5} distinct />
            <Index indexName="0x_tools_test" />
            <Index indexName="0x_guides_test" />
            <Label>
                <LabelText>Search query</LabelText>
                {/* <Input isHome={props.isHome} />*/}
            </Label>
        </Wrapper>
        </InstantSearch>
    </>
);

SearchInput.defaultProps = {
    isHome: false,
};

const Wrapper = styled.div<Props>`
    width: 100%;
    max-width: 240px;
    position: relative;

    ${props =>
        props.isHome &&
        `
        max-width: 890px;
        margin: 0 auto;
    `};
`;

const Label = styled.label`
    position: relative;
`;

const LabelText = styled.span`
    position: absolute;
    opacity: 0;
    visibility: hidden;
`;

const Input = styled.input.attrs({
    placeholder: 'Search docs...',
})<Props>`
    background: url("data:image/svg+xml,%3Csvg width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' fill-opacity='.01' d='M0 0h24v24H0z'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5 10.5a5.5 5.5 0 1 1 11 0 5.5 5.5 0 0 1-11 0zM10.5 3a7.5 7.5 0 1 0 4.55 13.463l4.743 4.744 1.414-1.414-4.744-4.744A7.5 7.5 0 0 0 10.5 3z' fill='%235C5C5C'/%3E%3C/svg%3E") transparent left center no-repeat;
    font-size: 1.375rem;
    padding: 18px 18px 21px 35px;
    width: 100%;
    border: 0;
    border-bottom: 1px solid #b4bebd;
    outline: none;

    ${props =>
        !props.isHome &&
        `
        background-color: #EBEEEC;
        border-bottom: 0;
        padding: 13px 21px 15px 52px;
        background-position: left 21px center;
        font-size: 1.125rem;
    `};

    &:before {
        content: '';
        width: 30px;
        height: 30px;
        opacity: 0.15;
        position: absolute;
        top: 0;
        left: 0;
    }
`;
