import {browserHistory, RouteComponentProps} from 'react-router';

import {t} from 'sentry/locale';
import AsyncView from 'sentry/views/asyncView';
import SettingsPageHeader from 'sentry/views/settings/components/settingsPageHeader';
import PermissionAlert from 'sentry/views/settings/project/permissionAlert';
import KeySettings from 'sentry/views/settings/project/projectKeys/details/keySettings';
import KeyStats from 'sentry/views/settings/project/projectKeys/details/keyStats';
import {ProjectKey} from 'sentry/views/settings/project/projectKeys/types';

type Props = RouteComponentProps<
  {
    keyId: string;
    orgId: string;
    projectId: string;
  },
  {}
>;

type State = {
  data: ProjectKey;
} & AsyncView['state'];

export default class ProjectKeyDetails extends AsyncView<Props, State> {
  getTitle() {
    return t('Key Details');
  }

  getEndpoints(): ReturnType<AsyncView['getEndpoints']> {
    const {keyId, orgId, projectId} = this.props.params;
    return [['data', `/projects/${orgId}/${projectId}/keys/${keyId}/`]];
  }

  handleRemove = () => {
    const {orgId, projectId} = this.props.params;
    browserHistory.push(`/${orgId}/${projectId}/settings/keys/`);
  };

  renderBody() {
    const {data} = this.state;
    const {params} = this.props;

    return (
      <div data-test-id="key-details">
        <SettingsPageHeader title={t('Key Details')} />
        <PermissionAlert />

        <KeyStats api={this.api} params={params} />

        <KeySettings
          api={this.api}
          params={params}
          data={data}
          onRemove={this.handleRemove}
        />
      </div>
    );
  }
}