import React, {Fragment} from 'react';
import {Link} from 'react-router-dom';
import {DataTablePage} from '../../datatable/page/data-table-page';
import {IconButton} from '../../ui/buttons/icon-button';
import {EditIcon} from '../../icons/material/Edit';
import {FormattedDate} from '../../i18n/formatted-date';
import {ColumnConfig} from '../../datatable/column-config';
import {Trans} from '../../i18n/trans';
import {Localization} from '../../i18n/localization';
import {TranslateIcon} from '../../icons/material/Translate';
import {DialogTrigger} from '../../ui/overlays/dialog/dialog-trigger';
import {UpdateLocalizationDialog} from './update-localization-dialog';
import {Tooltip} from '../../ui/tooltip/tooltip';
import {CreateLocationDialog} from './create-localization-dialog';
import {DataTableEmptyStateMessage} from '../../datatable/page/data-table-emty-state-message';
import aroundTheWorldSvg from './around-the-world.svg';
import {DataTableAddItemButton} from '../../datatable/data-table-add-item-button';
import {DeleteSelectedItemsAction} from '../../datatable/page/delete-selected-items-action';

const columnConfig: ColumnConfig<Localization>[] = [
  {
    key: 'name',
    allowsSorting: true,
    sortingKey: 'name',
    visibleInMode: 'all',
    width: 'flex-3 min-w-200',
    header: () => <Trans message="Name" />,
    body: locale => locale.name,
  },
  {
    key: 'language',
    allowsSorting: true,
    sortingKey: 'language',
    header: () => <Trans message="Language code" />,
    body: locale => locale.language,
  },
  {
    key: 'updatedAt',
    allowsSorting: true,
    width: 'w-100',
    header: () => <Trans message="Last updated" />,
    body: locale => <FormattedDate date={locale.updated_at} />,
  },
  {
    key: 'actions',
    header: () => <Trans message="Actions" />,
    hideHeader: true,
    align: 'end',
    width: 'w-84 flex-shrink-0',
    visibleInMode: 'all',
    body: locale => {
      return (
        <div className="text-muted">
          <Link to={`${locale.id}/translate`}>
            <Tooltip label={<Trans message="Translate" />}>
              <IconButton size="md">
                <TranslateIcon />
              </IconButton>
            </Tooltip>
          </Link>
          <DialogTrigger type="modal">
            <Tooltip label={<Trans message="Edit" />}>
              <IconButton>
                <EditIcon />
              </IconButton>
            </Tooltip>
            <UpdateLocalizationDialog localization={locale} />
          </DialogTrigger>
        </div>
      );
    },
  },
];

export function LocalizationIndex() {
  return (
    <DataTablePage
      endpoint="localizations"
      title={<Trans message="Localizations" />}
      columns={columnConfig}
      actions={<Actions />}
      selectedActions={<DeleteSelectedItemsAction />}
      emptyStateMessage={
        <DataTableEmptyStateMessage
          image={aroundTheWorldSvg}
          title={<Trans message="No localizations have been created yet" />}
          filteringTitle={<Trans message="No matching localizations" />}
        />
      }
    />
  );
}

function Actions() {
  return (
    <Fragment>
      <DialogTrigger type="modal">
        <DataTableAddItemButton>
          <Trans message="Add new localization" />
        </DataTableAddItemButton>
        <CreateLocationDialog />
      </DialogTrigger>
    </Fragment>
  );
}