import React from 'react';
import './icon.scss';

import img_save from "../assets/img/save.svg";
import img_power from "../assets/img/power.svg";
import img_bucket from "../assets/img/bucket.svg";
import img_loading from "../assets/img/loader.svg";
import img_play from "../assets/img/play.svg";
import img_pause from "../assets/img/pause.svg";
import img_error from "../assets/img/error.svg";
import img_loading_white from "../assets/img/loader_white.svg";
import img_download_white from "../assets/img/download_white.svg";
import img_upload_white from "../assets/img/upload_white.svg";
import img_todo_white from '../assets/img/todo_white.svg';
import img_calendar_white from '../assets/img/calendar_white.svg';
import img_calendar from '../assets/img/calendar.svg';
import img_alarm from '../assets/img/alarm.svg';
import img_arrow_right from '../assets/img/arrow_right.svg';
import img_arrow_right_white from '../assets/img/arrow_right_white.svg';
import img_arrow_left_white from '../assets/img/arrow_left_white.svg';
import img_arrow_left from '../assets/img/arrow_left.svg';
import img_arrow_top from '../assets/img/arrow_top.svg';
import img_arrow_bottom from '../assets/img/arrow_bottom.svg';
import img_more from '../assets/img/more.svg';
import img_close from '../assets/img/close.svg';
import img_close_dark from '../assets/img/close_dark.svg';
import img_schedule from '../assets/img/schedule.svg';
import img_deadline from '../assets/img/deadline.svg';
import img_arrow_down from '../assets/img/arrow-down.svg';
import img_arrow_up_double from '../assets/img/arrow-up-double.svg';
import img_arrow_down_double from '../assets/img/arrow-down-double.svg';
import img_search from '../assets/img/search.svg';
import img_search_dark from '../assets/img/search_dark.svg';
import img_grid from '../assets/img/grid.svg';
import img_list from '../assets/img/list.svg';
import img_sort from '../assets/img/sort.svg';
import img_check from '../assets/img/check.svg';
import img_info from '../assets/img/info.svg';
import img_fullscreen from '../assets/img/fullscreen.svg';
import img_camera from '../assets/img/camera.svg';
import img_location from '../assets/img/location.svg';
import img_stop from '../assets/img/stop.svg';
import img_refresh from '../assets/img/refresh.svg';
export const img_placeholder = "/assets/icons/placeholder.png";

export const Icon = (props) => {
    if(props.name === null) return null;
    let img;
    if(props.name === 'directory'){
        img = "/assets/icons/folder.svg";
    }else if(props.name === 'file'){
        img = "/assets/icons/file.svg";
    }else if(props.name === 'save'){
        img = img_save;
    }else if(props.name === 'power'){
        img = img_power;
    }else if(props.name === 'edit'){
        img = "/assets/icons/edit.svg";
    }else if(props.name === 'delete'){
        img = "/assets/icons/delete.svg";
    }else if(props.name === 'share'){
        img = "/assets/icons/share.svg";
    }else if(props.name === 'bucket'){
        img = img_bucket;
    }else if(props.name === 'download_white'){
        img = img_download_white;
    }else if(props.name === 'upload_white'){
        img = img_upload_white;
    }else if(props.name === 'play'){
        img = img_play;
    }else if(props.name === 'pause'){
        img = img_pause;
    }else if(props.name === 'error'){
        img = img_error;
    }else if(props.name === 'loading_white'){
        img = img_loading_white;
    }else if(props.name === 'loading'){
        img = img_loading;
    }else if(props.name === 'calendar_white'){
        img = img_calendar_white;
    }else if(props.name === 'schedule'){
        img = img_calendar;
    }else if(props.name === 'deadline'){
        img = img_alarm;
    }else if(props.name === 'todo_white'){
        img = img_todo_white;
    }else if(props.name === 'arrow_bottom'){
        img = img_arrow_bottom;
    }else if(props.name === 'arrow_top'){
        img = img_arrow_top;
    }else if(props.name === 'arrow_right'){
        img = img_arrow_right;
    }else if(props.name === 'arrow_right_white'){
        img = img_arrow_right_white;
    }else if(props.name === 'arrow_left_white'){
        img = img_arrow_left_white;
    }else if(props.name === 'arrow_left'){
        img = img_arrow_left;
    }else if(props.name === 'more'){
        img = img_more;
    }else if(props.name === 'close'){
        img = img_close;
    }else if(props.name === 'close_dark'){
        img = img_close_dark;
    }else if(props.name === 'arrow_up_double'){
        img = img_arrow_up_double;
    }else if(props.name === 'arrow_down_double'){
        img = img_arrow_down_double;
    }else if(props.name === 'arrow_down'){
        img = img_arrow_down;
    }else if(props.name === 'search'){
        img = img_search;
    }else if(props.name === 'search_dark'){
        img = img_search_dark;
    }else if(props.name === 'grid'){
        img = img_grid;
    }else if(props.name === 'list'){
        img = img_list;
    }else if(props.name === 'sort'){
        img = img_sort;
    }else if(props.name === 'check'){
        img = img_check;
    }else if(props.name === 'info'){
        img = img_info;
    }else if(props.name === 'fullscreen'){
        img = img_fullscreen;
    }else if(props.name === 'camera'){
        img = img_camera;
    }else if(props.name === 'location'){
        img = img_location;
    } else if (props.name === 'stop') {
        img = img_stop;
    } else if (props.name === 'refresh') {
        img = img_refresh;
    }else{
        throw('unknown icon: "'+props.name+"'");
    }

    return (
        <img className="component_icon"
             style={props.style}
             onClick={props.onClick}
             src={img}
             alt={props.name}/>
    );
};