import * as React from 'react';
import * as mapboxgl from 'mapbox-gl';
import {CSSProperties, HTMLProps, PureComponent} from 'react';
import {Map} from 'mapbox-gl';
import {Datagrid, DatagridCardsView, DatagridTableView, DatagridMapView} from './../../../components/Datagrid';
import {ColumnHeaderProperty, Query, SelectOption, ViewMode} from './../../../components/Datagrid/models';

const styles = {
  map: {
    position: 'absolute',
    top: 0,
    bottom: 0,
    width: '100%',
  } as CSSProperties,
};

const datagridProperties = [
  {sortKey: 'name', name: 'Name'},
  {sortKey: 'email', name: 'Email'},
  {sortKey: 'phone', name: 'Phone'},
  {sortKey: 'address.name', name: 'Address', thStyle: {flex: 2}},
];

const data = [
  {
    id: '591b851b0ecc0efba5d6a8ff',
    name: 'Emma Bell',
    email: 'emmabell@solaren.com',
    phone: '+1 (916) 400-3830',
    address: '202 Regent Place, Convent, Utah, 2410',
  },
  {
    id: '591b851b5989fc95c3d9a821',
    name: 'Irma Reed',
    email: 'irmareed@solaren.com',
    phone: '+1 (804) 448-3011',
    address: '350 Gallatin Place, Gordon, North Carolina, 7386',
  },
  {
    id: '591b851b5bb9f941e11c76ba',
    name: 'Delgado Knapp',
    email: 'delgadoknapp@solaren.com',
    phone: '+1 (893) 542-3984',
    address: '454 Cove Lane, Westwood, Northern Mariana Islands, 7353',
  },
  {
    id: '591b851b8a71caa873073f2b',
    name: 'Marissa Wilder',
    email: 'marissawilder@solaren.com',
    phone: '+1 (893) 418-3661',
    address: '605 Rost Place, Rew, Delaware, 8809',
  },
  {
    id: '591b851b48693c73568dc89e',
    name: 'Claudine Alvarez',
    email: 'claudinealvarez@solaren.com',
    phone: '+1 (999) 598-3649',
    address: '502 Bragg Street, Imperial, South Carolina, 9047',
  },
  {
    id: '591b851b38676997a2a27b0c',
    name: 'Walsh Powers',
    email: 'walshpowers@solaren.com',
    phone: '+1 (864) 544-2598',
    address: '265 Manhattan Court, Bison, North Carolina, 2567',
  },
  {
    id: '591b851b0ecc0efba5d6a8f0',
    name: 'Emma Bell',
    email: 'emmabell@solaren.com',
    phone: '+1 (916) 400-3830',
    address: '202 Regent Place, Convent, Utah, 2410',
  },
  {
    id: '591b851b5989fc95c3d9a820',
    name: 'Irma Reed',
    email: 'irmareed@solaren.com',
    phone: '+1 (804) 448-3011',
    address: '350 Gallatin Place, Gordon, North Carolina, 7386',
  },
  {
    id: '591b851b5bb9f941e11c76b0',
    name: 'Delgado Knapp',
    email: 'delgadoknapp@solaren.com',
    phone: '+1 (893) 542-3984',
    address: '454 Cove Lane, Westwood, Northern Mariana Islands, 7353',
  },
  {
    id: '591b851b8a71caa873073f20',
    name: 'Marissa Wilder',
    email: 'marissawilder@solaren.com',
    phone: '+1 (893) 418-3661',
    address: '605 Rost Place, Rew, Delaware, 8809',
  },
  {
    id: '591b851b48693c73568dc890',
    name: 'Claudine Alvarez',
    email: 'claudinealvarez@solaren.com',
    phone: '+1 (999) 598-3649',
    address: '502 Bragg Street, Imperial, South Carolina, 9047',
  },
  {
    id: '591b851b38676997a2a27b00',
    name: 'Walsh Powers',
    email: 'walshpowers@solaren.com',
    phone: '+1 (864) 544-2598',
    address: '265 Manhattan Court, Bison, North Carolina, 2567',
  },
  {
    id: '591b851b0ecc0efba5d6a8f-',
    name: 'Emma Bell',
    email: 'emmabell@solaren.com',
    phone: '+1 (916) 400-3830',
    address: '202 Regent Place, Convent, Utah, 2410',
  },
  {
    id: '591b851b5989fc95c3d9a82-',
    name: 'Irma Reed',
    email: 'irmareed@solaren.com',
    phone: '+1 (804) 448-3011',
    address: '350 Gallatin Place, Gordon, North Carolina, 7386',
  },
  {
    id: '591b851b5bb9f941e11c76b-',
    name: 'Delgado Knapp',
    email: 'delgadoknapp@solaren.com',
    phone: '+1 (893) 542-3984',
    address: '454 Cove Lane, Westwood, Northern Mariana Islands, 7353',
  },
  {
    id: '591b851b8a71caa873073f2-',
    name: 'Marissa Wilder',
    email: 'marissawilder@solaren.com',
    phone: '+1 (893) 418-3661',
    address: '605 Rost Place, Rew, Delaware, 8809',
  },
  {
    id: '591b851b48693c73568dc89-',
    name: 'Claudine Alvarez',
    email: 'claudinealvarez@solaren.com',
    phone: '+1 (999) 598-3649',
    address: '502 Bragg Street, Imperial, South Carolina, 9047',
  },
  {
    id: '591b851b38676997a2a27b0-',
    name: 'Walsh Powers',
    email: 'walshpowers@solaren.com',
    phone: '+1 (864) 544-2598',
    address: '265 Manhattan Court, Bison, North Carolina, 2567',
  },
];

export interface State {
  data: any;
  query: Query;
  searchTerm: string;
}

export class ComplexDatagrid extends PureComponent<{}, State> {
  private mainButtonMetadata: HTMLProps<HTMLAnchorElement>;
  private searchPropertyOptions: SelectOption[];

  state: State = {
    data: data,
    query: {
      limit: 50,
      skip: 0,
      sort: 'name',
    },
    searchTerm: '',
  };

  constructor() {
    super();

    this.mainButtonMetadata = {
      title: 'New Button',
      href: '#',
      onClick: () => console.log('new button clicked'),
    };

    this.searchPropertyOptions = [
      {text: 'Name', value: 'name'},
      {text: 'Email', value: 'email'},
    ];
  }

  componentDidMount() {
    (mapboxgl as any).accessToken = 'pk.eyJ1Ijoic2hmaXNoYnVybiIsImEiOiJjaWs2dHB0cXQwMHdqaHJtMjJ6ejVra2R0In0.Gfuf4QMy6U0MfG1fDddZvQ';

    const map = new Map({
      container: 'map',
      style: 'mapbox://styles/mapbox/streets-v9',
      center: [-74.50, 40],
      zoom: 9,
    });
  }

  render() {
    const {query, searchTerm} = this.state;

    return(
      <Datagrid
        defaultFilterDisabled
        mainButton={this.mainButtonMetadata}
        properties={datagridProperties}
        query={query}
        searchInputPlaceholder="Search"
        searchPropertyOptions={this.searchPropertyOptions}
        searchPropertyValue="email"
        searchTerm={searchTerm}
        total={data.length}
        onChangeQuery={this.handleQueryChange}
        onChangeViewMode={this.handleViewModeChange}
        onSearchTerm={this.handleSearchTermChange}
        onToggleFilters={console.log}
      >
        <DatagridTableView properties={datagridProperties}>
          {this.state.data.map(item => (
            <div key={item.id} className="grid-tr">
              <div className="grid-td">{item.name}</div>
              <div className="grid-td">{item.email}</div>
              <div className="grid-td">{item.phone}</div>
              <div className="grid-td" style={{flex: 2}}>{item.address}</div>
            </div>
          ))}
        </DatagridTableView>

        <DatagridCardsView>
          {this.state.data.map(item => (
            <div key={item.id} className="col-12 col-sm-6 col-lg-4 col-xl-3 col-xxl-2">
              <div className="card">
                <div className="card-block">
                  <h4 className="card-title truncate">
                    <span className=" item-status active"></span>
                    <a
                      href="#"
                      title="Some St"
                    >
                        Some St
                    </a>
                  </h4>

                  <p className="card-text">
                    <span className="d-block truncate">City:&nbsp;<strong>Atlanta, GA</strong></span>
                    <span className="d-block truncate">Street:&nbsp;<strong>Some Street</strong></span>
                    <span className="d-block truncate">Info C:&nbsp;<strong>000000001111111111</strong></span>
                  </p>
                </div>
              </div>
            </div>
          ))}
        </DatagridCardsView>

        <DatagridMapView>
          <div id="map" style={styles.map} />
        </DatagridMapView>
      </Datagrid>
    );
  }

  handleSearchTermChange = (searchTerm: string) => this.setState({searchTerm});

  handleQueryChange = (query: Query) => {
    const newRow = {
      id: new Date().getMilliseconds(),
      name: 'Delgado Knapp',
      email: 'delgadoknapp@solaren.com',
      phone: '+1 (893) 542-3984',
      address: '454 Cove Lane, Westwood, Northern Mariana Islands, 7353',
    };
    const data = [...this.state.data, newRow];
    this.setState({query, data});
  }

  handleViewModeChange = (viewMode: ViewMode) => console.log('VIEW MODE', viewMode);
}