import * as React from 'react';
import Grid from '@material-ui/core/Grid';
import { withStyles } from '@material-ui/core/styles';
import * as classnames from 'classnames';
import Card, { CardHeader } from 'ui/common/Card';
import { translate } from 'react-i18next';

import { IPageRequest, SortDirection } from 'model/Page';
import Pagination from 'model/Pagination';
import DescriptorFilter from 'model/catalog/DescriptorFilter';
import Descriptor from 'model/catalog/Descriptor';
import FilteredPage from 'model/FilteredPage';

import Button from '@material-ui/core/Button';
import DescriptorCard from 'descriptors/ui/c/DescriptorCard';
import PaginationComponent from 'ui/common/pagination';
import DescriptorFilters from 'descriptors/ui/c/Filters';
import { log } from 'utilities/debug';
import PagedLoader from 'ui/common/PagedLoader';

interface IDescriptorPickerProps extends React.ClassAttributes<any> {
  classes: any;
  history: any;
  location: any;
  loadDescriptors: (page?: IPageRequest, filter?: DescriptorFilter | string) => void;
  loadMoreDescriptors: (paged?: FilteredPage<Descriptor>, filter?: string | DescriptorFilter) => void;
  clearDescriptors: () => void;
  matchingDescriptors: FilteredPage<Descriptor>; // results from loadDescriptors
  onAddDescriptor: (descriptor: Descriptor) => void; // event handler
  onRemoveDescriptor: (descriptor: Descriptor) => void; // event handler
  onAddAllDescriptors: any; // event handler
  onRemoveAllDescriptors: any; // event handler
  currentDescriptors: Descriptor[]; // currently selected descriptors
  pagination?: Pagination<DescriptorFilter>;
  loadCrops: () => any;
  t: any;
}

const styles = (theme) => ({
  leftPanel: theme.leftPanel.root,
  titleCardDisabled: {
    fontWeight: 'normal' as 'normal',
    fontStyle: 'italic' as 'italic',
    color: '#d4d4d2 ',
  },
  greenBackground: {
    backgroundColor: '#DCE8C8',
  },
  grayBackground: {
    position: 'relative' as 'relative',
    backgroundColor: '#ECEBE7',
  },
  emptyCardHeader: {
    padding: '16px !important',
  },
  paginationComponent: {
    position: 'absolute' as 'absolute',
    bottom: '0',
  },
  fake: {
    height: '30px',
  },
  btnBlue: theme.buttons.blue,
  btnDefault: theme.buttons.default,
  flexGrow: {
    flex: '1 1 auto',
  },
});

class DescriptorPicker extends React.Component<IDescriptorPickerProps, any> {

  protected onPaginationChange = (sortBy, dir, page, results) => {
    const { history, location, loadDescriptors } = this.props;
    const params = new URLSearchParams(location.search);
    params.set('p', page);
    params.set('l', results);
    if (sortBy) {
      params.set('s', sortBy);
    } else {
      params.delete('s');
    }
    if (dir) {
      params.set('d', dir);
    } else {
      params.delete('d');
    }

    location.search = params.toString();
    history.push(location);
    loadDescriptors({ page: 0, size: 20, properties: sortBy, direction: dir as SortDirection }, null);
  }

  protected applyFilters = (newFilters) => {
    const { loadDescriptors, pagination } = this.props;

    log('Applying new filter', newFilters);
    loadDescriptors({ page: pagination.page, size: pagination.size, properties: pagination.sort as string[], direction: pagination.dir as SortDirection }, newFilters);
  }

  private onDescriptorSelected = (select) => (descriptor: Descriptor) => {
    const { onAddDescriptor, onRemoveDescriptor } = this.props;

    if (select) {
      onAddDescriptor(descriptor);
    } else {
      onRemoveDescriptor(descriptor);
    }
  }

  public componentWillMount() {
    const { matchingDescriptors, pagination, loadDescriptors, loadCrops } = this.props;

    if (!matchingDescriptors) {
      log('Loading descriptors');
      loadDescriptors({ page: pagination.page, size: pagination.size, properties: pagination.sort as string[], direction: pagination.dir as SortDirection }, pagination.filter);
    }

    loadCrops();
  }

  public componentWillUnmount() {
    this.props.clearDescriptors();
  }

  public render() {

    const { classes, matchingDescriptors, onAddAllDescriptors, onRemoveAllDescriptors, loadMoreDescriptors, t } = this.props;

    // handle empty current descriptors
    let { currentDescriptors } = this.props;
    if (!currentDescriptors) {
      currentDescriptors = [];
    }

    const renderDescription = (descriptor: Descriptor) => (
      <DescriptorCard
        className="ml-20 mr-20 mb-20"
        key={ descriptor.uuid }
        descriptor={ descriptor }
        compact
        crop version
        textRows={ 3 }
        selectedProps={ {
          selectable: true,
          onSelect: this.onDescriptorSelected(true),
          disabled: currentDescriptors && currentDescriptors.map((d) => d.uuid).indexOf(descriptor.uuid) !== -1,
        } }
      />
    );

    return (
      <Grid container spacing={ 0 } className={ classes.container }>
        <Grid item xs={ 12 } lg={ 2 } className={ classes.leftPanel }>
          <DescriptorFilters initialValues={ matchingDescriptors && matchingDescriptors.filter || {} } onSubmit={ this.applyFilters }/>
        </Grid>
        <Grid item xs={ 12 } lg={ 5 } className={ classes.grayBackground }>
          { matchingDescriptors && matchingDescriptors.content && matchingDescriptors.content.length < 2 ?
            <div className={ classes.fake }/> :
            <PaginationComponent
              pageObj={ matchingDescriptors }
              onSortChange={ this.onPaginationChange }
              displayName={ t('descriptors.common.modelName_plural') }
              sortOptions={ Descriptor.SORT_OPTIONS }
              actions={
                <Button className={ classes.btnBlue } onClick={ onAddAllDescriptors }>
                  { t('descriptors.dashboard.c.picker.addAll') }
                </Button>
              }
            />
          }
          { matchingDescriptors && matchingDescriptors.content &&
            <PagedLoader
              paged={ matchingDescriptors }
              loadMore={ loadMoreDescriptors }
              roughItemHeight={ 200 }
              itemRenderer={ renderDescription }
            />
          }
        </Grid>
        <Grid item xs={ 12 } lg={ 5 } className={ `${ classnames({ [classes.greenBackground]: currentDescriptors.length > 0 }) } even-row` }>
          <Grid container item spacing={ 0 }>
            <h4 className="font-bold pt-20 pl-20">
              { currentDescriptors.length } { currentDescriptors.length > 1 ?
              t('descriptors.dashboard.c.picker.descriptor_plural') :
              t('descriptors.dashboard.c.picker.descriptor') } { t('descriptors.dashboard.c.picker.selected')
            }
            </h4>
            <div className={ classes.flexGrow }/>
            <div className="pt-15 pr-20 pb-20 pl-20">
              <Button className={ classes.btnDefault } onClick={ onRemoveAllDescriptors }>
                { t('descriptors.dashboard.c.picker.removeAll') }
              </Button>
            </div>
          </Grid>
          {
            currentDescriptors.length === 0 && (
              <Card square className="ml-20 mr-20 mb-20">
                <CardHeader
                  className={ classes.emptyCardHeader }
                  classes={ {
                    title: classes.titleCardDisabled,
                  } }
                  title={
                    (
                      <span>{ t('descriptors.dashboard.c.picker.zero') }</span>
                    )
                  }
                />
              </Card>
            )
          }
          { currentDescriptors.length > 0 && currentDescriptors.map((descriptor: Descriptor) => (
              <DescriptorCard
                key={ descriptor.uuid }
                className="ml-20 mr-20 mb-20"
                descriptor={ descriptor }
                compact
                crop version
                textRows={ 3 }
                onUnselect={ this.onDescriptorSelected(false) }
                selectedProps={ {
                  selectable: false,
                  onUnselect: this.onDescriptorSelected(false),
                } }
              />
            ),
          ) }
        </Grid>
      </Grid>
    );
  }
}

export default translate()(withStyles(styles)(DescriptorPicker));