// Copyright (c) 2022 Uber Technologies, Inc.
//
// Permission is hereby granted, free of charge, to any person obtaining a copy
// of this software and associated documentation files (the "Software"), to deal
// in the Software without restriction, including without limitation the rights
// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
// copies of the Software, and to permit persons to whom the Software is
// furnished to do so, subject to the following conditions:
//
// The above copyright notice and this permission notice shall be included in
// all copies or substantial portions of the Software.
//
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
// THE SOFTWARE.

import React, {Component, ComponentType, ReactElement} from 'react';
import styled from 'styled-components';
import Switch from 'components/common/switch';

import BrushConfigFactory from './brush-config';
import TooltipConfigFactory from './tooltip-config';

import {
  StyledPanelHeader,
  PanelHeaderTitle,
  PanelHeaderContent,
  PanelContent
} from 'components/common/styled-components';
import {FormattedMessage} from 'localization';

interface InteractionPanelProps {
  datasets: any;
  config: {
    id: string;
    enabled: boolean;
    label: string;
    iconComponent: any;
    config: any;
  };
  onConfigChange: any;
}

const StyledInteractionPanel = styled.div`
  padding-bottom: 6px;
`;

InteractionPanelFactory.deps = [TooltipConfigFactory, BrushConfigFactory];

function InteractionPanelFactory(
  TooltipConfig: ReturnType<typeof TooltipConfigFactory>,
  BrushConfig: ReturnType<typeof BrushConfigFactory>
): ComponentType<InteractionPanelProps> {
  return class InteractionPanel extends Component<InteractionPanelProps> {
    state = {
      isConfigActive: false
    };

    _updateConfig = newProp => {
      this.props.onConfigChange({
        ...this.props.config,
        ...newProp
      });
    };

    _enableConfig = () => {
      this.setState({isConfigActive: !this.state.isConfigActive});
    };

    render() {
      const {config, datasets} = this.props;
      const onChange = newConfig => this._updateConfig({config: newConfig});
      let template: ReactElement | null = null;

      switch (config.id) {
        case 'tooltip':
          template = (
            <TooltipConfig datasets={datasets} config={config.config} onChange={onChange} />
          );
          break;
        case 'brush':
          template = <BrushConfig config={config.config} onChange={onChange} />;
          break;

        default:
          break;
      }

      return (
        <StyledInteractionPanel className="interaction-panel">
          <StyledPanelHeader className="interaction-panel__header" onClick={this._enableConfig}>
            <PanelHeaderContent className="interaction-panel__header__content">
              <div className="interaction-panel__header__icon icon">
                <config.iconComponent height="16px" />
              </div>
              <div className="interaction-panel__header__title">
                <PanelHeaderTitle>
                  <FormattedMessage id={config.label} />
                </PanelHeaderTitle>
              </div>
            </PanelHeaderContent>
            <div className="interaction-panel__header__actions">
              <Switch
                checked={config.enabled}
                id={`${config.id}-toggle`}
                onChange={() => this._updateConfig({enabled: !config.enabled})}
                secondary
              />
            </div>
          </StyledPanelHeader>
          {config.enabled && template && (
            <PanelContent className="interaction-panel__content">{template}</PanelContent>
          )}
        </StyledInteractionPanel>
      );
    }
  };
}

export default InteractionPanelFactory;
