import React, { useState, useEffect } from 'react';
import FormDialog from './FormDialog';
import Button from './Button';
// import { Creatable } from 'react-select'
import Select from 'react-select';
import { Link } from 'react-router-dom';
import I18n from '../../../../src/shared/FakeI18n';

import { connect } from 'react-redux';

type TagDialogType = {
  children?: React.ReactChild;
  title?: string;
  saveHandler?: (tags: any) => void;
  closeHandler?: () => void;
  tags?: any;
  app?: any;
};

function TagDialog({
  children,
  title,
  saveHandler,
  closeHandler,
  tags,
  app,
}: TagDialogType) {
  const tagList = tags.map((o) => ({
    label: o,
    value: o,
  }));

  const [isOpen, setIsOpen] = useState(false);
  const [selectedTags, setSelectedTags] = useState(tagList);

  useEffect(() => {
    setIsOpen(true);
  }, []);

  function close() {
    setIsOpen(false);
    closeHandler && closeHandler();
  }

  const colourOptions = app.tagList.map((o) => ({
    label: o.name,
    value: o.name,
    color: o.color,
  }));

  function handleChange(changes) {
    setSelectedTags(changes);
  }

  return (
    <div>
      {isOpen && (
        <FormDialog
          open={isOpen}
          handleClose={closeHandler}
          titleContent={title}
          formComponent={
            <form>
              {children}

              <Select
                isClearable
                isMulti
                defaultValue={tagList}
                onChange={handleChange}
                // onInputChange={handleInputChange}
                options={colourOptions}
              />

              <p className="text-sm leading-5 text-gray-500">
                {I18n.t('settings.tags.modal.hint')}{' '}
                <Link
                  to={`/apps/${app.key}/settings`}
                  className="no-underline hover:underline text-green-500"
                >
                  {I18n.t('settings.tags.modal.link')}
                </Link>
              </p>
            </form>
          }
          dialogButtons={
            <React.Fragment>
              <Button
                className="ml-2"
                onClick={() => saveHandler(selectedTags.map((o) => o.value))}
                variant="success"
              >
                {I18n.t('common.save')}
              </Button>
              <Button onClick={close} variant="outlined">
                {I18n.t('common.cancel')}
              </Button>
            </React.Fragment>
          }
        ></FormDialog>
      )}
    </div>
  );
}

function mapStateToProps(state) {
  const { app } = state;
  return {
    app,
  };
}

export default connect(mapStateToProps)(TagDialog);
