
const Icon = {
    props: {
        css: {
            type: String,
            default: 'text-gray-800'
        },
        size: {
            type: String,
            default: 'md'
        }
    },
    methods: {
        defineSize: (val) => {
            let size = '';
            
            switch(val){
                case 'xs':
                    size = 'w-3 h-3';
                    break;
                case 'sm': 
                    size = 'w-4 h-4';
                    break;
                case 'lg':
                    size = 'w-6 h-6';
                    break;
                default:
                    size = 'w-5 h-5';
                    break;
            }
    
            return size;
        }
    },
}

const AddressBookIcon = {
    __proto__: Icon,
    setup: () => {
        console.log(this.props)
    },
    template: `<svg :class="[defineSize(size),css]" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 6H5m2 3H5m2 3H5m2 3H5m2 3H5m11-1a2 2 0 0 0-2-2h-2a2 2 0 0 0-2 2M7 3h11a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1Zm8 7a2 2 0 1 1-4 0 2 2 0 0 1 4 0Z"/>
        </svg>`
};

const AlignCenterIcon = {
    __proto__: Icon,
    template: `<svg :class="css" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 6h8M6 10h12M8 14h8M6 18h12"/>
        </svg>`
}

const EditIcon = {
    __proto__: Icon,
    template: `<svg :class="[defineSize(size),css]" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m14.304 4.844 2.852 2.852M7 7H4a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h11a1 1 0 0 0 1-1v-4.5m2.409-9.91a2.017 2.017 0 0 1 0 2.853l-6.844 6.844L8 14l.713-3.565 6.844-6.844a2.015 2.015 0 0 1 2.852 0Z"/>
        </svg>`
}

const TrashBinIcon = {
    __proto__: Icon,
    template: `<svg :class="[defineSize(size),css]" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24">
            <path fill-rule="evenodd" d="M8.586 2.586A2 2 0 0 1 10 2h4a2 2 0 0 1 2 2v2h3a1 1 0 1 1 0 2v12a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V8a1 1 0 0 1 0-2h3V4a2 2 0 0 1 .586-1.414ZM10 6h4V4h-4v2Zm1 4a1 1 0 1 0-2 0v8a1 1 0 1 0 2 0v-8Zm4 0a1 1 0 1 0-2 0v8a1 1 0 1 0 2 0v-8Z" clip-rule="evenodd"/>
        </svg>`
}

const SearchIcon = {
    __proto__: Icon,
    template: `<svg aria-hidden="true" class="text-gray-500" :class="[defineSize(size),css]" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
        </svg>`
}

const AdjustmentIcon = {
    __proto__: Icon,
    template: `<svg class="text-gray-500" :class="[defineSize(size),css]" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
            <path stroke="currentColor" stroke-linecap="round" stroke-width="2" d="M20 6H10m0 0a2 2 0 1 0-4 0m4 0a2 2 0 1 1-4 0m0 0H4m16 6h-2m0 0a2 2 0 1 0-4 0m4 0a2 2 0 1 1-4 0m0 0H4m16 6H10m0 0a2 2 0 1 0-4 0m4 0a2 2 0 1 1-4 0m0 0H4"/>
        </svg>
`
}

const AngleDownIcon = {
    __proto__: Icon,
    template: `<svg class="text-gray-500" :class="[defineSize(size),css]" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m19 9-7 7-7-7"/>
        </svg>
    `
}

const AngleUpIcon = {
    __proto__: Icon,
    template: `<svg class="text-gray-800" :class="[defineSize(size),css]" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m5 15 7-7 7 7"/>
        </svg>
    `
}

const UserEditIcon = {
    __proto__: Icon,
    template: `<svg :class="[defineSize(size),css]" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
            <path stroke="currentColor" stroke-linecap="square" stroke-linejoin="round" stroke-width="2" d="M7 19H5a1 1 0 0 1-1-1v-1a3 3 0 0 1 3-3h1m4-6a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm7.441 1.559a1.907 1.907 0 0 1 0 2.698l-6.069 6.069L10 19l.674-3.372 6.07-6.07a1.907 1.907 0 0 1 2.697 0Z"/>
        </svg>
    `
}


const CirclePlusIcon = {
    __proto__: Icon,
    template: `<svg :class="[defineSize(size),css]" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 7.757v8.486M7.757 12h8.486M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/>
        </svg>
    `
}

const PlusIcon = {
    __proto__: Icon,
    template: `<svg :class="[defineSize(size),css]" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14m-7 7V5"/>
        </svg>
    `
}

const DottedMenu = {
    __proto__: Icon,
    template: `<svg :class="[defineSize(size),css]" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 4 15">
          <path d="M3.5 1.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm0 6.041a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm0 5.959a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Z" />
        </svg>
    `
}

export {
    AddressBookIcon, 
    AlignCenterIcon,
    EditIcon,
    TrashBinIcon,
    SearchIcon,
    AdjustmentIcon,
    AngleDownIcon,
    AngleUpIcon,
    UserEditIcon,
    CirclePlusIcon,
    PlusIcon,
    DottedMenu
};
