import { createSlice , PayloadAction } from '@reduxjs/toolkit' ; import { CanvasElementsSchema } from 'modules/Canvas/fabricUtils' ; const INITIAL_STATE = { config : { playlistId : undefined , shouldRefreshCanvas : false , } , data : { backgroundFilters : { filters : [ ] , gradients : { list : [ ] } } , backgroundUrl : 'https://images.unsplash.com/photo-1485872299829-c673f5194813?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MXwxMjE4NjV8MHwxfHNlYXJjaHw0fHxwYXJ0eXxlbnwwfHx8&ixlib=rb-1.2.1&q=80&w=1080' , backgroundColor : '#0c2640' , typeConfig : { fontFamily : 'Montserrat' , fontSize : 20 , } , types : [ { fill : '#ffffff' , relativeLeft : 0.07 , relativeTop : 0.07 , scaleX : 0.003 , scaleY : 0.003 , text : 'This is' , version : '1.0.1' , } , { fill : '#ffffff' , relativeLeft : 0.07 , relativeTop : 0.41 , scaleX : 0.006 , scaleY : 0.006 , text : 'Start \ncreating' , fontWeight : 'bold' , version : '1.0.1' , } , ] , } , } ; const { actions : canvasActions , reducer : canvasReducer } = createSlice ( { initialState : INITIAL_STATE , name : 'canvas' , reducers : { resetData : ( state ) => ( { config : { playlistId : state . config . playlistId , shouldRefreshCanvas : true , } , data : INITIAL_STATE . data , } ) , setRefreshCanvasOff : ( state ) => ( { ... state , config : { ... state . config , shouldRefreshCanvas : false , } , } ) , save : ( state , action ) => ( { config : { ... state . config , saved : true , shouldRefreshCanvas : true , } , data : action . payload , } ) , setPlaylist : ( state , action ) => ( { ... state , config : { ... state . config , playlistId : action . payload , } , } ) , putIndexColor : ( state , action ) => ( { ... state , data : { ... state . data , types : ( state . data . types ?? [ ] ) . map ( ( type , index ) => { if ( index === action . payload . index ) { return { ... type , fill : action . payload . color , } ; } return type ; } ) , } , config : { ... state . config , shouldRefreshCanvas : true , } , } ) , putColors : ( state , action ) => ( { ... state , data : { ... state . data , types : ( state . data . types ?? [ ] ) . map ( ( type , index ) => { if ( index === 0 ) { return { ... type , fill : action . payload . foreground } ; } if ( index === 1 ) { return { ... type , fill : action . payload . main } ; } return type ; } ) , } , config : { ... state . config , shouldRefreshCanvas : true , } , } ) , putFontFamily : ( state , action ) => ( { config : { ... state . config , saved : false , shouldRefreshCanvas : true , } , data : { ... state . data , typeConfig : { ... state . data . typeConfig , fontFamily : action . payload , } , } , } ) , putBackgroundFilter : ( state , action ) => ( { config : { ... state . config , saved : false , shouldRefreshCanvas : true , } , data : { ... state . data , backgroundFilters : action . payload , } , } ) , putTypes : ( state , action ) => ( { config : { ... state . config , saved : false , } , data : { ... state . data , typeConfig : action . payload . typeConfig , types : action . payload . types , } , } ) , putBackground : ( state , action ) => ( { config : { ... state . config , saved : false , shouldRefreshCanvas : true , } , data : { ... state . data , backgroundUrl : action . payload . url , backgroundColor : action . payload . color , } , } ) , setSaved : ( state , action ) => ( { ... state , config : { ... state . config , saved : action . payload , } , } ) , } , } ) ; const canvasSelector = { configSave : ( data ) => data . canvas . config . saved , data : ( data ) => data . canvas . data , playlistId : ( data ) => data . canvas . config . playlistId , currentColors : ( data ) => ( data . canvas . data . types ?? [ ] ) . map ( ( e ) => e . fill ) , currentFontFamily : ( data ) => data . canvas . data . typeConfig . fontFamily , } ; export { canvasReducer , canvasActions , canvasSelector } ;