import React, { useMemo } from 'react';
import spriteImg from '../../assets/sprite.png';

const spriteInfo = [
    {
        name: '启用',
        type: 'start',
        pos: 0,
        color: '#ff925c',
    },
    {
        name: '发布',
        type: 'publish',
        pos: -126,
        color: '#ff925c',
    },
    {
        name: '上架',
        type: 'up',
        pos: -18,
        color: '#ff925c',
    },
    {
        name: '编辑',
        type: 'edit',
        pos: -144,
        color: '#ff925c',
    },
    {
        name: '取消',
        type: 'cancel',
        pos: -36,
        color: '#FF4A4A',
    },
    {
        name: '停用',
        type: 'stop',
        pos: -162,
        color: '#FF4A4A',
    },
    {
        name: '结束',
        type: 'end',
        pos: -54,
        color: '#FF4A4A',
    },
    {
        name: '删除',
        type: 'delete',
        pos: -180,
        color: '#FF4A4A',
    },
    {
        name: '查看',
        type: 'look',
        pos: -72,
        color: '#FF4A4A',
    },
    {
        name: '添加',
        type: 'add',
        pos: -198,
        color: '#FF4A4A',
    },
    {
        name: '前置',
        type: 'top',
        pos: -90,
        color: '#FF4A4A',
    },
    {
        name: '下架',
        type: 'down',
        pos: -216,
        color: '#FF4A4A',
    },
    {
        name: '记录',
        type: 'record',
        pos: -108,
        color: '#FF4A4A',
    },
    {
        name: '数据',
        type: 'data',
        pos: -234,
        color: '#FF4A4A',
    },
    {
        name: '下载二维码',
        type: 'download',
        pos: -252,
        color: '#ff925c',
    },
]

function noop() { }

const EditIcon = ({ text, type, color, position, onClick }) => {
    const icon = spriteInfo.filter(x => x.type === type)[0] || {};
    const color2 = color || icon.color || '#ff925c';
    const position2 = position || icon.pos;

    const wrappedStyle = useMemo(() => ({ color: `${color2}`, display: 'flex', alignItems: 'center', cursor: 'pointer' }), [type, color]);
    const iconStyle = useMemo(() => ({ display: 'inline-block', marginLeft: '6px', background: `url(${spriteImg}) 0 ${position2}px / 100% 1500% no-repeat`, width: '18px', height: '18px' }), [type, position])

    return (
        <span style={wrappedStyle} onClick={onClick || noop} >
            {text}
            {type && <span style={iconStyle}></span>}
        </span>
    )
};

export default EditIcon;
