/** @format */

import _, { merge } from 'lodash';
import React from 'react';

import { Box } from './styled';

interface DecorativeStripProps {
  size?: Record<string, any>;
  [key: string]: any;
}

const DecorativeStrip = (props: DecorativeStripProps) => {
  const {
    size = {
      width: 500,
      height: '50px',
    },
    color = 'blue',
    lineType = {
      value: 'barLine',
    },
  } = props;

  const IMG: any = {
    barLine:
      'https://gt-toolbox.oss-cn-beijing.aliyuncs.com/gt-toolbox/c55740ab-62ed-4d79-b4a2-741c0915061e.svg',
    perpendicular:
      'https://gt-toolbox.oss-cn-beijing.aliyuncs.com/gt-toolbox/3d898adf-ec0f-48fc-8f83-199d9408e4fd.svg',
    shadowLine:
      'https://gt-toolbox.oss-cn-beijing.aliyuncs.com/gt-toolbox/79c6c88f-6f40-4437-964c-cb519c1ac2f0.svg',
    thinneLine:
      'https://gt-toolbox.oss-cn-beijing.aliyuncs.com/gt-toolbox/db61569f-fb14-44c4-b021-dee2f100e477.svg',
    crossDottedLine:
      'https://gt-toolbox.oss-cn-beijing.aliyuncs.com/gt-toolbox/2e6e04c9-2c5d-48cc-a823-6e07cf805d7e.svg',
    barDashed:
      'https://gt-toolbox.oss-cn-beijing.aliyuncs.com/gt-toolbox/78288b24-f44e-4053-a4ff-9acc7246aaa5.svg',
    longSquareLine:
      'https://gt-toolbox.oss-cn-beijing.aliyuncs.com/gt-toolbox/23b0573e-b9d4-4b93-abd2-0ab762cc9398.svg',
    thickThinLine:
      'https://gt-toolbox.oss-cn-beijing.aliyuncs.com/gt-toolbox/50dfea96-9778-4c3a-b823-40025294e325.svg',
    ellipseLine:
      'https://gt-toolbox.oss-cn-beijing.aliyuncs.com/gt-toolbox/28540dcd-2938-499c-bba9-acab3e783fb3.svg',
    hammerSpacingLine:
      'https://gt-toolbox.oss-cn-beijing.aliyuncs.com/gt-toolbox/5a1e5264-fd30-462e-8cf1-02e30d6cbb61.svg',
    doubleHammerSpacingLine:
      'https://gt-toolbox.oss-cn-beijing.aliyuncs.com/gt-toolbox/661b6e0e-333e-4e06-92a8-66cee1840d06.svg',
    shuangjingLine:
      'https://gt-toolbox.oss-cn-beijing.aliyuncs.com/gt-toolbox/1bad4ae2-b638-4882-8a74-f76aa0219225.svg',
    denghaoJiangeLine:
      'https://gt-toolbox.oss-cn-beijing.aliyuncs.com/gt-toolbox/2bb1c32f-4945-40ed-850f-2d61313e76ee.svg',
    danxiangLine:
      'https://gt-toolbox.oss-cn-beijing.aliyuncs.com/gt-toolbox/29c04b82-6414-4286-bb65-311955d71a96.svg',
  };

  const baseStyle = {
    WebkitMaskImage: `url(${IMG[lineType?.value]})`,
    background: color,
  };

  return <Box style={_.merge(baseStyle, size)}></Box>;
};

export default DecorativeStrip;