import React,{Component} from 'react'
import styled from 'styled-components'
import _ from 'lodash'

import {PhotoEditorDataTypes} from './photo-editor';

const Block = styled.div`
  margin: 0 20px 12px;
`
const Title = styled.div`
  font-size: 12px;
  user-select: none;
`
const Content = styled.div`
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  user-select: none;
`
const Img = styled.img`
  width: 150px;
  height: 150px;
`

interface PhotoEditorInfoPanelProps {
  layerList: PhotoEditorDataTypes[];
  selectedShapeId: string;
  selected: any;
}
interface PhotoEditorInfoPanelState {
  selectedData: PhotoEditorDataTypes,
}

class PhotoEditorInfoPanel extends Component<PhotoEditorInfoPanelProps, PhotoEditorInfoPanelState> {
  constructor(props: PhotoEditorInfoPanelProps) {
    super(props)
    this.state = {
      selectedData: null,
    }
  }
  static getDerivedStateFromProps(props: PhotoEditorInfoPanelProps, state: PhotoEditorInfoPanelState) {
    const {layerList, selectedShapeId} = props;
    return {
      selectedData: layerList.filter((l:PhotoEditorDataTypes) => l.id === selectedShapeId)[0]
    }
  }
  // shouldComponentUpdate(nextProps: PhotoEditorInfoPanelProps) {
  //   const {selectedShapeId} = nextProps
  //   if (!selectedShapeId) {
  //     return false
  //   }
  //   return true
  // }
  render() {
    const {selectedData} = this.state;
    const {selected} = this.props
    if (!selectedData) {
      return null
    }
    if (selectedData.type === "text") {
      return (
        <div style={{borderTop: '1px solid rgba(255,255,255,0.1)', paddingTop: '5px'}}>
          {/* {selectedData.label} */}
          {/* <div>{selectedData.text}</div> */}
          <Block>
            <Title>位置</Title>
            <Content>X: {_.round(selectedData.x, 2)}</Content>
            <Content>Y: {_.round(selectedData.y, 2)}</Content>
          </Block>
          <Block>
            <Title>尺寸</Title>
            <Content>宽: {selected ? Math.abs(_.round(selected.width())) : ''}</Content>
            <Content>高: {selected ? Math.abs(_.round(selected.height())) : ''}</Content>
            {/* <Title>尺寸</Title>
            <Content>宽: {_.round(selectedData.scale.x * selectedData.width, 2)}</Content>
            <Content>高: {_.round(selectedData.scale.y * selectedData.height, 2)}</Content> */}
          </Block>
          <Block>
            <Title>旋转</Title>
            <Content>角度: {_.round(selectedData.rotation, 2)}°</Content>
          </Block>
        </div>
      )
    } else {
      return (
        <div style={{borderTop: '1px solid rgba(255,255,255,0.1)', paddingTop: '5px'}}>
          {/* {selectedData.label} */}
          <Block>
            <Title>位置</Title>
            <Content>X: {_.round(selectedData.x, 2)}</Content>
            <Content>Y: {_.round(selectedData.y, 2)}</Content>
          </Block>
          <Block>
            <Title>尺寸</Title>
            <Content>宽: {Math.abs(_.round(selectedData.scale.x * selectedData.width, 2))}</Content>
            <Content>高: {Math.abs(_.round(selectedData.scale.y * selectedData.height, 2))}</Content>
          </Block>
          <Block>
            <Title>旋转</Title>
            <Content>角度: {_.round(selectedData.rotation, 2)}°</Content>
          </Block>
          {/* <Title>图片</Title>
          <Img src={selectedData.src} alt=""/> */}
        </div>
      )
    }
  }
}

export default PhotoEditorInfoPanel