/**
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
 * distributed with this work for additional information
 * regarding copyright ownership.  The ASF licenses this file
 * to you under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance
 * with the License.  You may obtain a copy of the License at
 *
 *   http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on an
 * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 * KIND, either express or implied.  See the License for the
 * specific language governing permissions and limitations
 * under the License.
 */
import React, { FunctionComponent, useState, useRef } from 'react';
import Alert from 'src/components/Alert';
import Button from 'src/components/Button';
import { FeatureFlag, styled, SupersetClient, t } from '@superset-ui/core';

import Modal from 'src/components/Modal';
import AsyncEsmComponent from 'src/components/AsyncEsmComponent';
import { isFeatureEnabled } from 'src/featureFlags';

import { getClientErrorObject } from 'src/utils/getClientErrorObject';
import withToasts from 'src/components/MessageToasts/withToasts';

const DatasourceEditor = AsyncEsmComponent(() => import('./DatasourceEditor'));

const StyledDatasourceModal = styled(Modal)`
  .modal-content {
    height: 900px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  .modal-header {
    flex: 0 1 auto;
  }
  .modal-body {
    flex: 1 1 auto;
    overflow: auto;
  }

  .modal-footer {
    flex: 0 1 auto;
  }
`;

interface DatasourceModalProps {
  addSuccessToast: (msg: string) => void;
  datasource: any;
  onChange: () => {};
  onDatasourceSave: (datasource: object, errors?: Array<any>) => {};
  onHide: () => {};
  show: boolean;
}

function buildExtraJsonObject(item: Record<string, unknown>) {
  const certification =
    item?.certified_by || item?.certification_details
      ? {
          certified_by: item?.certified_by,
          details: item?.certification_details,
        }
      : undefined;
  return JSON.stringify({
    certification,
    warning_markdown: item?.warning_markdown,
  });
}

const DatasourceModal: FunctionComponent<DatasourceModalProps> = ({
  addSuccessToast,
  datasource,
  onDatasourceSave,
  onHide,
  show,
}) => {
  const [currentDatasource, setCurrentDatasource] = useState(datasource);
  const [errors, setErrors] = useState<any[]>([]);
  const [isSaving, setIsSaving] = useState(false);
  const [isEditing, setIsEditing] = useState<boolean>(false);
  const dialog = useRef<any>(null);
  const [modal, contextHolder] = Modal.useModal();

  const onConfirmSave = () => {
    // Pull out extra fields into the extra object
    const schema =
      currentDatasource.tableSelector?.schema ||
      currentDatasource.databaseSelector?.schema ||
      currentDatasource.schema;

    setIsSaving(true);
    SupersetClient.put({
      endpoint: `/api/v1/dataset/${currentDatasource.id}`,
      jsonPayload: {
        table_name: currentDatasource.table_name,
        database_id: currentDatasource.database?.id,
        sql: currentDatasource.sql,
        filter_select_enabled: currentDatasource.filter_select_enabled,
        fetch_values_predicate: currentDatasource.fetch_values_predicate,
        schema,
        description: currentDatasource.description,
        main_dttm_col: currentDatasource.main_dttm_col,
        offset: currentDatasource.offset,
        default_endpoint: currentDatasource.default_endpoint,
        cache_timeout:
          currentDatasource.cache_timeout === ''
            ? null
            : currentDatasource.cache_timeout,
        is_sqllab_view: currentDatasource.is_sqllab_view,
        template_params: currentDatasource.template_params,
        extra: currentDatasource.extra,
        is_managed_externally: currentDatasource.is_managed_externally,
        external_url: currentDatasource.external_url,
        metrics: currentDatasource?.metrics?.map(
          (metric: Record<string, unknown>) => {
            const metricBody: any = {
              expression: metric.expression,
              description: metric.description,
              metric_name: metric.metric_name,
              metric_type: metric.metric_type,
              d3format: metric.d3format,
              verbose_name: metric.verbose_name,
              warning_text: metric.warning_text,
              uuid: metric.uuid,
              extra: buildExtraJsonObject(metric),
            };
            if (!Number.isNaN(Number(metric.id))) {
              metricBody.id = metric.id;
            }
            return metricBody;
          },
        ),
        columns: currentDatasource?.columns?.map(
          (column: Record<string, unknown>) => ({
            id: typeof column.id === 'number' ? column.id : undefined,
            column_name: column.column_name,
            type: column.type,
            advanced_data_type: column.advanced_data_type,
            verbose_name: column.verbose_name,
            description: column.description,
            expression: column.expression,
            filterable: column.filterable,
            groupby: column.groupby,
            is_active: column.is_active,
            is_dttm: column.is_dttm,
            python_date_format: column.python_date_format || null,
            uuid: column.uuid,
            extra: buildExtraJsonObject(column),
          }),
        ),
        owners: currentDatasource.owners.map(
          (o: Record<string, number>) => o.value || o.id,
        ),
      },
    })
      .then(() => {
        addSuccessToast(t('The dataset has been saved'));
        return SupersetClient.get({
          endpoint: `/api/v1/dataset/${currentDatasource?.id}`,
        });
      })
      .then(({ json }) => {
        // eslint-disable-next-line no-param-reassign
        json.result.type = 'table';
        onDatasourceSave({
          ...json.result,
          owners: currentDatasource.owners,
        });
        onHide();
      })
      .catch(response => {
        setIsSaving(false);
        getClientErrorObject(response).then(({ error }) => {
          modal.error({
            title: t('Error'),
            content: error || t('An error has occurred'),
            okButtonProps: { danger: true, className: 'btn-danger' },
          });
        });
      });
  };

  const onDatasourceChange = (data: Record<string, any>, err: Array<any>) => {
    setCurrentDatasource({
      ...data,
      metrics: data?.metrics.map((metric: Record<string, unknown>) => ({
        ...metric,
        is_certified: metric?.certified_by || metric?.certification_details,
      })),
    });
    setErrors(err);
  };

  const renderSaveDialog = () => (
    <div>
      <Alert
        css={theme => ({
          marginTop: theme.gridUnit * 4,
          marginBottom: theme.gridUnit * 4,
        })}
        type="warning"
        showIcon
        message={t(`The dataset configuration exposed here
                affects all the charts using this dataset.
                Be mindful that changing settings
                here may affect other charts
                in undesirable ways.`)}
      />
      {t('Are you sure you want to save and apply changes?')}
    </div>
  );

  const onClickSave = () => {
    dialog.current = modal.confirm({
      title: t('Confirm save'),
      content: renderSaveDialog(),
      onOk: onConfirmSave,
      icon: null,
      okText: t('OK'),
      cancelText: t('Cancel'),
    });
  };

  const showLegacyDatasourceEditor = !isFeatureEnabled(
    FeatureFlag.DISABLE_LEGACY_DATASOURCE_EDITOR,
  );

  return (
    <StyledDatasourceModal
      show={show}
      onHide={onHide}
      title={
        <span>
          {t('Edit Dataset ')}
          <strong>{currentDatasource.table_name}</strong>
        </span>
      }
      maskClosable={!isEditing}
      footer={
        <>
          {showLegacyDatasourceEditor && (
            <Button
              buttonSize="small"
              buttonStyle="default"
              data-test="datasource-modal-legacy-edit"
              className="m-r-5"
              onClick={() => {
                window.location.href =
                  currentDatasource.edit_url || currentDatasource.url;
              }}
            >
              {t('Use legacy datasource editor')}
            </Button>
          )}
          <Button
            data-test="datasource-modal-cancel"
            buttonSize="small"
            className="m-r-5"
            onClick={onHide}
          >
            {t('Cancel')}
          </Button>
          <Button
            buttonSize="small"
            buttonStyle="primary"
            data-test="datasource-modal-save"
            onClick={onClickSave}
            disabled={
              isSaving ||
              errors.length > 0 ||
              currentDatasource.is_managed_externally
            }
            tooltip={
              currentDatasource.is_managed_externally
                ? t(
                    "This dataset is managed externally, and can't be edited in Superset",
                  )
                : ''
            }
          >
            {t('Save')}
          </Button>
        </>
      }
      responsive
    >
      <DatasourceEditor
        showLoadingForImport
        height={500}
        datasource={currentDatasource}
        onChange={onDatasourceChange}
        setIsEditing={setIsEditing}
      />
      {contextHolder}
    </StyledDatasourceModal>
  );
};

export default withToasts(DatasourceModal);