/**
 * Copyright 2018-present Facebook.
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 * @format
 */

import type {ImageData} from './api.js';
import type {ImageEventWithId} from './index.js';
import {
  Component,
  DataDescription,
  Text,
  Panel,
  ManagedDataInspector,
  colors,
  styled,
} from 'flipper';

type ImagesSidebarProps = {
  image: ?ImageData,
  events: Array<ImageEventWithId>,
};

type ImagesSidebarState = {};

const DataDescriptionKey = styled('span')({
  color: colors.grapeDark1,
});

export default class ImagesSidebar extends Component<
  ImagesSidebarProps,
  ImagesSidebarState,
> {
  render() {
    return (
      <div>
        {this.renderUri()}
        {this.props.events.map(e => (
          <EventDetails key={e.eventId} event={e} />
        ))}
      </div>
    );
  }

  renderUri() {
    if (!this.props.image) {
      return null;
    }
    if (!this.props.image.uri) {
      return null;
    }
    return (
      <p>
        <DataDescriptionKey>URI</DataDescriptionKey>
        <span key="sep">: </span>
        <DataDescription
          type="string"
          value={this.props.image.uri}
          setValue={function(path: Array<string>, val: any) {}}
        />
      </p>
    );
  }
}

class EventDetails extends Component<{
  event: ImageEventWithId,
}> {
  static Container = styled(Panel)({
    flexShrink: 0,
    marginTop: '15px',
  });

  render() {
    const {event} = this.props;

    return (
      <EventDetails.Container
        heading={<RequestHeader event={event} />}
        floating={false}
        padded={false}
        grow={false}
        collapsed={false}>
        <p>
          <DataDescriptionKey>Attribution</DataDescriptionKey>
          <span key="sep">: </span>
          <ManagedDataInspector data={event.attribution} />
        </p>
        <p>
          <DataDescriptionKey>Time start</DataDescriptionKey>
          <span key="sep">: </span>
          <DataDescription
            type="number"
            value={event.startTime}
            setValue={function(path: Array<string>, val: any) {}}
          />
        </p>
        <p>
          <DataDescriptionKey>Time end</DataDescriptionKey>
          <span key="sep">: </span>
          <DataDescription
            type="number"
            value={event.endTime}
            setValue={function(path: Array<string>, val: any) {}}
          />
        </p>
        <p>
          <DataDescriptionKey>Source</DataDescriptionKey>
          <span key="sep">: </span>
          <DataDescription
            type="string"
            value={event.source}
            setValue={function(path: Array<string>, val: any) {}}
          />
        </p>
        <p>
          <DataDescriptionKey>Requested on cold start</DataDescriptionKey>
          <span key="sep">: </span>
          <DataDescription
            type="boolean"
            value={event.coldStart}
            setValue={null}
          />
        </p>
        {this.renderViewportData()}
      </EventDetails.Container>
    );
  }

  renderViewportData() {
    const viewport = this.props.event.viewport;
    if (!viewport) {
      return null;
    }
    return (
      <p>
        <DataDescriptionKey>Viewport</DataDescriptionKey>
        <span key="sep">: </span>
        <DataDescription
          type="string"
          value={viewport.width + 'x' + viewport.height}
          setValue={function(path: Array<string>, val: any) {}}
        />
      </p>
    );
    // TODO (t31947746): grey box time, n-th scan time
  }
}

class RequestHeader extends Component<{
  event: ImageEventWithId,
}> {
  dateString = timestamp => {
    const date = new Date(timestamp);
    return `${date.toTimeString().split(' ')[0]}.${(
      '000' + date.getMilliseconds()
    ).substr(-3)}`;
  };

  render() {
    const {event} = this.props;
    const durationMs = event.endTime - event.startTime;
    return (
      <Text>
        {event.viewport ? 'Request' : 'Prefetch'} at{' '}
        {this.dateString(event.startTime)} ({durationMs}ms)
      </Text>
    );
  }
}

@@ -348,16 +348,41 @@
 pector,%0A
+  FlexColumn,%0A  FlexRow,%0A
   colors
@@ -383,16 +383,16 @@
 colors,%0A
-
   styled
@@ -608,16 +608,96 @@
 1,%0A%7D);%0A%0A
+const WordBreakFlexColumn = styled(FlexColumn)(%7B%0A  wordBreak: 'break-all',%0A%7D);%0A%0A
 export d
@@ -1123,35 +1123,119 @@
 return (%0A      %3C
-p%3E%0A
+Panel heading=%22Sources%22 floating=%7Bfalse%7D%3E%0A        %3CFlexRow%3E%0A          %3CFlexColumn%3E%0A    
         %3CDataDes
@@ -1263,32 +1263,83 @@
 DescriptionKey%3E%0A
+          %3C/FlexColumn%3E%0A          %3CFlexColumn%3E%0A    
         %3Cspan ke
@@ -1343,33 +1343,38 @@
  key=%22sep%22%3E:
- 
+&nbsp;
 %3C/span%3E%0A
         %3CDat
@@ -1353,32 +1353,92 @@
 %3E:&nbsp;%3C/span%3E%0A
+          %3C/FlexColumn%3E%0A          %3CWordBreakFlexColumn%3E%0A    
         %3CDataDes
@@ -1448,32 +1448,36 @@
 ption%0A          
+ 
+   
 type=%22string%22%0A  
@@ -1466,32 +1466,36 @@
   type=%22string%22%0A
+    
           value=
@@ -1519,32 +1519,36 @@
 .uri%7D%0A          
+   
+ 
 setValue=%7Bfuncti
@@ -1545,61 +1545,79 @@
 ue=%7B
-function(path: Array%3Cstring%3E, val: any) %7B%7D%7D%0A        /
+null%7D%0A            /%3E%0A          %3C/WordBreakFlexColumn%3E%0A        %3C/FlexRow
 %3E%0A  
@@ -1614,33 +1614,37 @@
 lexRow%3E%0A      %3C/
-p
+Panel
 %3E%0A    );%0A  %7D%0A%7D%0A%0A

Fix sidebar display