import React from 'react';

import { CollapsibleSection, LabeledValue, LabeledValueList, Overridable } from '@spinnaker/core';

export interface IIPRangeRulesProps {
  ipRules: IIPRangeRulesDetails[];
}
export interface IIPRangeRulesDetails {
  rules: IRangeRule[];
  address: string;
}

export interface IRangeRule {
  startPort: number;
  endPort: number;
  protocol: string;
  description: string;
}

@Overridable('aws.securityGroup.ip.rules')
export class IPRangeRules extends React.Component<IIPRangeRulesProps> {
  public render() {
    const ipRules = this.props.ipRules || [];
    const heading = `IP Range Rules (${ipRules.length})`;
    return (
      <CollapsibleSection heading={heading}>
        {ipRules.map((rule) => (
          <LabeledValueList className="horizontal-when-filters-collapsed">
            <LabeledValue label="IP Range" value={rule.address} />
            <LabeledValue
              label="Port Ranges"
              value={rule.rules.map((r) =>
                r.protocol === '-1' ? (
                  <span>
                    All ports and protocols
                    {rule.rules.length > 1 ? (
                      <div>
                        <em>Additional port ranges are specified, but redundant:</em>
                      </div>
                    ) : null}
                  </span>
                ) : (
                  <div>
                    <span>
                      {r.protocol}:{r.startPort} &rarr; {r.endPort}
                    </span>
                  </div>
                ),
              )}
            />
          </LabeledValueList>
        ))}
      </CollapsibleSection>
    );
  }
}