import React from 'react';
import ReactDOM from 'react-dom';
import { SearchBar } from 'fr8-searchbar';
import { darken } from 'polished';
import { wrapText } from 'fr8-searchbar/lib/utils';

const fetchedData = [
  {
    id: 'id1',
    name: 'FedEx',
    dotNumber: '123456789',
    mcNumber: '1234567',
  },
  {
    id: 'id2',
    name: 'Federal Department of',
    dotNumber: '123456789',
    mcNumber: '1234567',
  },
];

const testDataFeed = (value) =>
  fetchedData.filter((rowProps) => rowProps.name.toUpperCase().includes(value.toUpperCase()));

const Example = (props) => (
  <div key="keyRoot" style={{ width: '240px', height: '32px', padding: 0 }}>
    <SearchBar
      key="keySearchBar"
      bg="white"
      inputBg="white"
      inputColor="black"
      buttonColor="black"
      placeholder="Search here..."
      border="2px solid #005ede"
      borderRadius="2px"
      tableHeader={[
        { name: 'Business Name', width: '2fr', key: 'name' },
        { name: 'DOT Number', width: '1fr', key: 'dotNum' },
        { name: 'MC Number', width: '1fr', key: 'mcNum' },
      ]}
      headerColor="#4a90e2"
      hoverBg="rgba(148, 183, 230, 0.5)"
      hoverColor="#364147"
      activeBg={darken(0.5, 'rgba(148, 183, 230, 0.8)')}
      activeColor={darken(0.5, '#364147')}
      dataFeed={testDataFeed}
      rowIdKey="id"
      nameKey="name"
      onChange={() => {}}
      dataWrapper={(value) => wrapText(value)}
      animationTime={700}
    />
  </div>
);

ReactDOM.render(<Example />, document, getElementById('root'));